Chapter 04

tailwindcss Flex レイアウト

knaka Tech-Blog
knaka Tech-Blog
2021.04.29に更新
このチャプターの目次

概要:

Flex レイアウト の設定の例になります


関連

https://tailwindcss.com/docs/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

....