display: flex

デフォルトでは要素は上下にブロック要素として表示される。

display: flex

を親に追加すると要素は列に配置される。

.wrapper {
  display: flex;
}

display: flex

が適用された要素をフレックスコンテナという。

参考：MDN フレックスボックス

flex-direction

主軸の方向や向き（通常または逆方向）を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定するプロパティ。

/* 行のテキストの方向に配置 */
flex-direction: row;

/* 積み重なるように配置する */
flex-direction: column;

flex-direction: column

によりフレックスコンテナーの主軸は、ブロック軸と同じになる。

参考：MDN flex-direction

主軸とは

flexbox における主軸は、flex-direction プロパティの設定方向によって定義される。

• row の場合: 主軸はインライン要素の並ぶ方向に伸びる軸となる
• column の場合: ページの上から下に向かってブロック要素の並ぶ方向に伸びる軸となる

参考：MDN 主軸

align-items

フレックスボックスでは、直接の子要素に交差軸方向のアイテムの配置を制御する。 以下の設定により、子要素は水平方向の中央寄せとなる。

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

参考：MDN align-items

交差軸とは

主軸と直角に交差する軸のこと。

参考：MDN 交差軸

参考

• MDN フレックスボックス
• MDN flex-direction
• MDN 主軸
• MDN align-items
• MDN 交差軸