Flexbox in 15 minutes at Web Dev Simplified

超基本「フレックスボックス宣言」（親要素に指定）

display: flex;

コンテナ要素に display: flex; を設定することで、
子要素のボックスが フレックスボックス となる。
分かりやすい結果としては、各子要素が 縦ではなく横に並ぶ。

• 各子要素に width: 200px; を指定：
  • ウィンドウ幅が小さくなると自動で縮小する。
  • ウィンドウ幅が大きくなったときは拡大しない（余白ができる）。
• 各子要素に margin: 10px; を指定：
  • 子要素間にマージン 10px が取られる。
  • 子要素間のマージンは相殺されて 10px となる。
    • 両端の子要素の端マージンも 10px となる。
• 子要素それぞれに異なる min-height: を指定。
  （100px; 200px; 300px; が指定）
  • この段階では全て最大高に合ってしまう。
    （つまり全部の高さが 300px; に揃う）。

基本１「揃え」（親要素に指定）

1. justify-content:

親要素（コンテナ要素）に justify-content: を指定することで、
子要素群の 左右揃え を指定することができる。

• justify-content: flex-start; 【デフォルト】
  • 子要素群が左揃え（左->右 フローの場合）。
• justify-content: center;
  • 子要素群がセンタリング（左右中央揃え）。
• justify-content: flex-end;
  • 子要素群が右揃え（左->右 フローの場合）。
• justify-content: space-between;
  • 子要素群が左右均等揃え（要素間のマージンが拡大）。
• justify-content: space-around;
  • 子要素群が左右均等揃え（要素間にプラス左右両端のマージンも拡大）。

2. align-items:

親要素（コンテナ要素）に align-items: を指定することで、
子要素群の 上下揃え を指定することができる。

• align-items: stretch; 【デフォルト】
  • 各子要素は縦に 引き伸ばされ 最大のものに揃う 。
• align-items: flex-start;
  • 各子要素は 本来の高さ となり 上 に揃う。
• align-items: center;
  • 各子要素は 本来の高さ となり 上下中央 に揃う。
• align-items: flex-end;
  • 各子要素は 本来の高さ となり 下 に揃う。

3. align-content:

align-items: が、
子要素を文字と見たときの行の上下揃えを指定するのに対し、
align-content: は、
子要素全体をまとまりとして見たときの、
親要素（コンテナ要素）内での上下揃えを指定する。

• align-content: flex-start; で 上 揃え。
• align-content: center; で 上下中央 揃え。
• align-content: flex-end; で 下 揃え。
• align-content: space-between; で 上下均等 揃え。

4. flex-direction:

• flex-direction: column; とすれば、
  行の流れる「方向」が「横」ではなく「縦」になる。
  （「縦組み」「縦書き」の状態になる ）。
• この状態では「行」の概念が「横」ではなく「縦」になるので、
  例えば justify-content: は「上下」を揃えることになる。
  （以外の各プロパティについても同様）。

基本２「伸縮」（子要素に指定）

flex-shrink: flex-grow: flex-basis:

flex-shrink: は、幅が狭くなった時に当該子要素を縮めるかどうかを指定する。

• flex-shrink: 0; とすると、当該子要素は縮まない。
  • 結果として他の要素が縮むなどして幅に合わせる。
  • どうしても合わせられなくなればはみ出す。
  • 広げたときの挙動とは無関係（余白ができる）。

flex-grow: は、幅が広くなった時に当該子要素を伸ばすかどうかを指定する。

• flex-grow: 1; とすると、当該子要素は伸びて、
  全体として拡大した幅に合わさる。
• flex-grow: 1; とした子要素が複数あると、指定子要素は 同じだけ伸びて、
  全体として拡大した幅に合わさる。
• flex-grow: 1; flex-grow: 2; のように指定された子要素があると、
  2 の子要素は 1 の子要素の ２倍伸びて、
  全体として拡大した幅に合わさる。
  • 子要素の「幅が結果的に」２：１になるわけではない。
    「伸びる分量」が２：１に割り振られるということ。

flex-basis: は、伸縮とは無関係な基本となる幅を指定する。

• flex-basis: 0; を指定すると、
  当該子要素は、そもそもの幅が 0px と考えられた上で、
  伸び幅が flex-grow: の倍率に従い割り振られる。
  • したがって、関係子要素すべてにこれを指定すれば、
    伸びた結果、関係子要素の幅は倍率通りの比率となる。

応用１「子要素ごとに個別揃え」（子要素に指定）

align-self:

子要素に align-self: を指定することで、
コンテナ要素（親要素）の align-items: を上書きし、
当該子要素単体での上下揃えを主張することができる。

• つまり各子要素に別々の上下揃えを指定することができる。

応用２「並び順」（子要素に指定）

HTML での出現順を無視して、CSS で子要素の並び順を変更することができる。

order:

• 子要素に order: を指定すると、その値の小さいものから順に子要素が並んだ体になる。

応用３「伸縮指定の略記法」（子要素に指定）

flex:

• 子要素のプロパティ flex: は、
  flex-grow: flex-shrink: flex-basis: の順で値を書ける略記法である。