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

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

FlexBox Cheat Sheets in 2021
by Joy Shaheb

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

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

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

• Flexboxの構造
• Flexboxの各プロパティと値
• flex-directionプロパティ
• justify-contentプロパティ
• align-contentプロパティ
• align-itemsプロパティ
• align-selfプロパティ
• flex-grow | shrink | wrapプロパティ
• Flexboxのショートハンド
• 終わりに

Flexboxの構造

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

Flexboxの構造

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

Flexboxの各プロパティと値

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

Flexboxの各プロパティと値

flex-directionプロパティ

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

• row
  左から右へ（ltr）水平方向（メイン軸）に沿って配置。
• row-reverse
  rowの逆、右から左へ（rtl）水平方向（メイン軸）に沿って配置。

• column
  上から下へ垂直方向（クロス軸）に沿って配置。
• column-reverse
  columnの逆、下から上へ垂直方向（クロス軸）に沿って配置。

justify-contentプロパティ

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

• flex-start
  先頭に寄せて配置。
• flex-end
  後尾に寄せて配置
• center
  中央に寄せて配置。

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

align-contentプロパティ

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

• flex-start
  アイテムを先頭に寄せて配置。
• flex-end
  アイテムを後尾に寄せて配置。
• center
  アイテムを中央に寄せて配置。

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

align-itemsプロパティ

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

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

align-selfプロパティ

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

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-wrap

Flexboxのショートハンド

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

• flex

  flex-growとflex-shrinkとflex-basisの3つのプロパティをまとめたものです。

• flex-basis

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

flexプロパティ

終わりに

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

クレジット

• 画像: Flaticon