Tailwind CSSフレームワークでフレックス・ボックスを作成する方法と、flexクラスの一覧をご紹介します。
Tailwind CSSでフレックスボックスのコンテナを作成するには、flexクラスを指定する。
<div class="flex">
<div class="bg-green-100 px-2">1</div>
<div class="bg-green-100 px-2 ml-1">2</div>
<div class="bg-green-100 px-2 ml-1">3</div>
</div>Tailwind CSSでフレックスボックスを水平方向に左から右へ並べるには、flex-rowクラスを指定する。
<div class="flex flex-row">
<div class="bg-green-100 px-2">1</div>
<div class="bg-green-100 px-2 ml-1">2</div>
<div class="bg-green-100 px-2 ml-1">3</div>
</div>Tailwind CSSでフレックスボックスを水平方向に右から左へ並べるには、flex-row-reverseクラスを指定する。
<div class="flex flex-row-reverse">
<div class="bg-green-100 px-2">1</div>
<div class="bg-green-100 px-2 mr-1">2</div>
<div class="bg-green-100 px-2 mr-1">3</div>
</div>Tailwind CSSフレックスボックスを垂直方向に上から下へ並べるには、flex-colクラスを指定する。
<div class="flex flex-col">
<div class="bg-green-100 pl-2">1</div>
<div class="bg-green-100 pl-2 mt-1">2</div>
<div class="bg-green-100 pl-2 mt-1">3</div>
</div>Tailwind CSSでフレックスボックスを垂直方向に下から上へ並べるには、flex-col-reverseクラスを指定する。
<div class="flex flex-col-reverse">
<div class="bg-green-100 pl-2">1</div>
<div class="bg-green-100 pl-2 mb-1">2</div>
<div class="bg-green-100 pl-2 mb-1">3</div>
</div>flex-initialクラスを使用すると、初期サイズを考慮してフレックスアイテムを縮小できます。ただし、拡大はできません。
<div class="flex">
<div class="flex-initial w-64 bg-gray-400 m-1 p-1">
#1
</div>
<div class="flex-initial w-64 bg-gray-400 m-1 p-1">
#2
</div>
</div>flex-1クラスを使用すると、初期サイズを無視して、必要に応じてフレックスアイテムを拡大および縮小できます。
<div class="flex">
<div class="flex-1 w-64 bg-gray-400 m-1 p-1">
#1
</div>
<div class="flex-1 w-64 bg-gray-400 m-1 p-1">
#2
</div>
</div>flex-autoクラスを使用すると、初期サイズを考慮してフレックスアイテムを拡大および縮小できます。
<div class="flex">
<div class="flex-auto w-64 bg-gray-400 m-1 p-1">
#1
</div>
<div class="flex-auto w-64 bg-gray-400 m-1 p-1">
#2
</div>
</div>flex-noneクラスを使用すると、フレックス項目が拡大または縮小されないようになります。
初期サイズによっては非レスポンシブになるので、注意が必要です。
<div class="flex">
<div class="flex-none w-64 bg-gray-400 m-1 p-1">
#1
</div>
<div class="flex-none w-64 bg-gray-400 m-1 p-1">
#2
</div>
</div>