概要:
Flex レイアウト の設定の例になります
関連
- コード
https://github.com/kuc-arc-f/tailwind-sample/blob/main/src/01_flex.html
src/01_flex.html
- flex-row で、中のdivは flex-1 で、均等幅
01_flex.html
<div class="flex flex-row">
<div class="flex-1 bg-blue-400 text-center text-white p-2 m-1">1
</div>
<div class="flex-1 bg-blue-400 text-center text-white p-2 m-1">2
</div>
<div class="flex-1 bg-blue-400 text-center text-white p-2 m-1">3
</div>
<div class="flex-1 bg-blue-400 text-center text-white p-2 m-1">4
</div>
</div>
- flex-wrap、 中のdivは固定幅
01_flex.html
<div class="flex flex-wrap">
<div class="w-72 bg-blue-400 text-center text-white p-2 m-1">1
</div>
<div class="w-72 bg-blue-400 text-center text-white p-2 m-1">2
</div>
<div class="w-72 bg-blue-400 text-center text-white p-2 m-1">3
</div>
</div>
外観
- flex-wrapは、固定幅divが収まらない場合、改行されて表示されます
参考のデモページ
https://kuc-arc-f.github.io/tailwind-sample/src/01_flex.html
....