CSS Flexboxでどのように配置されるかをまとめたチートシート

Flexboxでよく使用するプロパティと値をまとめたチートシートを紹介します。
コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にFlexboxの使い方を学べます。

CSS Flexboxでどのように配置されるかをまとめたチートシート

FlexBox Cheat Sheets in 2021
by Joy Shaheb

同じ作者のCSS Gridのチートシートも翻訳しました。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Flexboxの構造

CSS Flexboxの知識をリフレッシュしましょう!
2021年に向けて、CSS flexboxでできることをチートシートにまとめました。

Flexboxの構造

Flexboxの構造

Flexboxは、Flexコンテナ内にFlexアイテムをメイン軸(Main Axis)またはクロス軸(Cross Axis)に沿って配置します。

Flexboxの各プロパティと値

Flexboxで使用できる各プロパティとその値の一覧です。

Flexboxの各プロパティと値

Flexboxの各プロパティと値

flex-directionプロパティ

flex-directionプロパティは、FlexアイテムがFlexコンテナ内にどのように配置されるかを定義します。軸(方向)は左右と上下の2種類、向きは順と逆の2種類。

rowとrow-reverse
  • row
    左から右へ(ltr)水平方向(メイン軸)に沿って配置。
  • row-reverse
    rowの逆、右から左へ(rtl)水平方向(メイン軸)に沿って配置。
columnとcolumn-reverse
  • column
    上から下へ垂直方向(クロス軸)に沿って配置。
  • column-reverse
    columnの逆、下から上へ垂直方向(クロス軸)に沿って配置。

justify-contentプロパティ

justify-contentプロパティは、FlexアイテムをFlexコンテナ内のメイン軸に沿って配置します。

flex-startとflex-endとcenter
  • flex-start
    先頭に寄せて配置。
  • flex-end
    後尾に寄せて配置
  • center
    中央に寄せて配置。
space-betweenとspace-aroundとspace-evenly
  • space-between
    先頭と後尾は端に、残りは等間隔に配置。
  • space-around
    すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔。
  • space-evenly
    すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔。

align-contentプロパティ

align-contentプロパティは、FlexアイテムをFlexコンテナ内のクロス軸に沿って配置します。justify-contentに似ていますね。

flex-startとflex-endとcenter
  • flex-start
    アイテムを先頭に寄せて配置。
  • flex-end
    アイテムを後尾に寄せて配置。
  • center
    アイテムを中央に寄せて配置。
space-betweenとspace-aroundとstretch
  • space-between
    先頭と後尾は端に、残りは等間隔に配置。
  • space-around
    すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔。
  • stretch
    すべてのアイテムを等間隔に配置。

align-itemsプロパティ

align-itemsプロパティは、FlexアイテムをFlexコンテナ内のクロス軸に沿って配置します。

flex-startとflex-endとcenterとstretchとbaseline
  • flex-start
    アイテムを先頭にまとめて配置。
  • flex-end
    アイテムを後尾にまとめて配置。
  • center
    アイテムを中央にまとめて配置。
  • stretch
    アイテムをコンテナの高さ(または幅)いっぱいに配置。
  • baseline
    アイテムをベースラインに沿って配置。

align-selfプロパティ

align-selfプロパティは、align-itemsの指定を上書きし、Flexアイテムの整列を優先します。

align-selfプロパティ

2番目のFlexアイテムにalign-selfプロパティを使用して、flex-endで配置。

flex-grow | shrink | wrapプロパティ

  • flex-grow
    Flexコンテナの幅に基づいてFlexアイテムのサイズを大きくします。
  • flex-shrink
    Flexコンテナの幅に基づいてFlexアイテムを縮小する機能。flex-growの反対。
  • flex-wrap
    その行に必要なFlexアイテムの量。
flex-growとflex-shrink

flex-growflex-shrink

flex-wrap

flex-wrap

Flexboxのショートハンド

サイトのキャプチャ

Flexboxには便利なショートハンドがあります。

  • flex
    flex-growflex-shrinkflex-basisの3つのプロパティをまとめたものです。
  • flex-basis
    flex-itemwidthを加えた感じですが、柔軟性がより高くなります。flex-basis: 10em;は、Flexアイテムの初期サイズを10emに設定し、最終的なサイズは利用可能なスペース、flex-growflex-shrinkに基づいて決定されます。
flex

flexプロパティ

終わりに

最後まで読んでくれて、ありがとうございます❤️

クレジット

sponsors

top of page

©2024 coliss