display: flex 子を一方向に並べて寄せる

この要素をフレックスの親要素にして、直下の子を一列（または一行）で並べる場合に使います。ナビ、カードのヘッダー、アイコンと文言、均等なボタン列など、一方向の揃えに向きます。

外側の描画です。親要素自身はブロックと同じく、外側の親の幅いっぱいに広がります。行の途中に置く場合は inline-flex です。

内側の描画（影響領域）です。効くのは直下の子までです。孫の並びは変わりません。子はフレックスアイテムになり、主軸と交差軸の2方向で位置が決まります。

• 主軸の向きは flex-direction（初期値は水平の row）
• 主軸の寄せ・分配は justify-content（先頭、中央、両端、均等など）
• 交差軸の寄せは align-items（伸びる stretch が初期値、中央は center）
• 折り返しは flex-wrap
• 子どうしの間隔は gap

カンプの「左右中央」「上下中央」「両端揃え」は、文字の text-align ではなく、この親要素側の指定で再現することが多いです。子に高さ指定がなくても、align-items: stretch のままだと、いちばん高い兄妹に揃って伸びます。高さを中身だけにしたい場合は align-items を変えます。

デザインを再現するときの影響です。親に display: flex を付けた瞬間、子の display はフレックスアイテム用の計算に変わります。子に指定していた float や、ブロック特有の縦積みは、その親要素の中では期待どおり動きません。2方向（行と列の両方）で位置を決めたい面は grid の方が向きます。

子の伸び縮みは flex-grow / flex-shrink / flex-basis（短縮の flex）です。文字が長くて潰れない、余白だけが伸びる、といった調整はここで行います。