前提

flexboxはフレックスコンテナとフレックスアイテムで構成される。フレックスアイテムはフレックスコンテナの子要素であり、フレックスコンテナとフレックスアイテムにCSSを指定していく形になる。

<div style="display: flex">
  <div style="flex: auto; background:#ffb7b7">a</div>
  <div style="flex: auto; background:#b7b7ff">b</div>
</div>

フレックスコンテナのプロパティ

• display
  • flexかinline-flexを指定することでフレックスコンテナとなる
• justify-content
  • フレックスアイテムの水平方向のレイアウト指定
  • 左よせ、右よせ、中央、均等配置など
• align-items
  • フレックスアイテムの垂直方向のレイアウト指定
  • 上よせ、下よせ、中央、均等配置など
• align-content
  • 複数行（複数列）になった場合のレイアウト指定
  • flex-wrapにnowrap以外を指定した場合に効果を発揮する
  • align-itemsは行内のアイテムの配置（行の中心は変わらない）を指定し、align-contentは全ての行の配置（行の中心が変わる）を指定するイメージ。
• gap
  • フレックスアイテム同士の隙間の幅指定
• flex-flow
  • 以下の二つのプロパティの一括指定をするプロパティ
  • flex-direction
    • フレックスアイテムの並ぶ向き指定
    • 左始まりの行、右始まりの行、上始まりの列、下始まりの列など
  • flex-wrap
    • フレックスアイテムの折り返し指定
    • 折り返す、折り返さない、逆向き折り返しなど

フレックスアイテムのプロパティ

• order
  • フレックスコンテナ内での当該フレックスアイテムの順序指定
• align-self
  • 当該フレックスアイテムの垂直方向（flex-direction: columnなら水平方向）のレイアウト指定
  • align-itemsの値と大体同じ
• flex
  • 以下の三つのプロパティの一括指定をするプロパティ
  • フレックスアイテムの領域を除いたフレックスコンテナの残りスペースをどう割り振るかを指定する
  • flex-grow
    • 残りスペースを使う割合みたいなもの
  • flex-shrink
    • フレックスコンテナをはみ出した分をコンテナ内に収めるために負担する割合みたいなもの
  • flex-basis
    • フレックスアイテムの基本の大きさ（伸縮する）