Zenn
🖥

Tailwind CSS の flex between で要素を左端・右端の左右に配置する例

2024/09/05に公開
CSS
Tailwind CSS
tech

両端に表示する例

  <div class="flex justify-between">
    <div>AAAA</div>
    <div>BBB</div>
  </div>

ちなみに要素が3個になると

  <div class="flex justify-between">
    <div>AAAA</div>
    <div>BBB</div>
    <div>CCC</div>
  </div>

3等分される

2個の要素を右端に固める例

flexをさらにflexで囲う

  <div class="flex justify-between">
    <div>AAAA</div>
    <div class="flex">
      <div>BBB</div>
      <div>CCC</div>
    </div>
  </div>

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

プロフィール・経歴

https://github.com/YumaInaura/YumaInaura

公開日時

2024-08-01

https://qiita.com/YumaInaura/items/e813e9b6d82928814e2e

Discussion