フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

Flexbox

tailwindcssのflexboxのレイアウトを触ってみる

参考ページ tailwindcss.com 記事一覧を作ってみる <section class="mt-16"> <h2 class="text-center mt-8 mb-8">記事一覧</h2> <div class="flex justify-center space-x-16 ml-4 mr-4"> <div class="w-1/4 border"> <img src="image1.jpg" class="w-96"> <h3 class="p-2 text-center">タイトル</h3> <p class="p-4">ここに文章が入ります。ここに文章が入ります。ここに文章が…</p></div></div></section>

FlexboxのResponsive

はじめに 前回、Flexboxを覚えたのでflexboxを利用したレスポンシブができないか試してみる。 px-wing.hatenablog.com コード ブラウザのサイズが800px以下の場合、flexboxを縦にして、800px以上の場合、横にするコードを作成してみました。 <html> <head> <style> .flex-conta</head></html>…

CSSのFlex boxを利用したときのメモ

はじめに CSSのFlex boxを利用する機会があったので、覚えたものをメモしたことをまとめてみた。 サポートブラウザ 属性 Chrome IE Firefox Safari opera flex 29.021.0 -webkit- 11.010.0 -ms- 28.018.0 -moz- 9.06.1 -webkit- 17 Flex box 属性 プロパティ…