Web デザインをするなら、絶対に避けて通れないやつ！フレックスボックスについてまとめてみました！
flex の意味は？
flex （フレックス）という単語の意味は、「融通のきく（形容詞）」や「適応性のある（形容詞）」、「（筋肉・関節を）曲げる（動詞）」や「（筋肉）を伸び縮みさせる（動詞）」です。よく身近な単語として「フレックスタイム」とか「フレキシブルに！」とか聞くと思うので、なんとな～くニュアンスは理解しやすいかと思います！
単語
flex：融通のきく（形容詞）、適応性のある（形容詞）、伸び縮みさせる（動詞）（weblio）
とりあえず
フレックスボックスを使うには
親要素に
display: flex; を設定するだけ！
難しいことはさておき、
とりあえず「フレックスボックス」を使ってみたいのであれば、親要素にdisplay: flex;というスタイルを設定します。それだけで、子要素は横並びになります。（デフォルトの場合）
ね？かんたんでしょ？
まずは、超簡単な「フレックスボックス」の設定方法でした。これを軸に細かい並びの調整を理解していけばよいのかなぁと思います！
縦と横の概念は
いったん忘れる
とつぜん
？？？
っとなるかもしれませんが、これを知っておくと、フレックスボックスについて理解しやすくなると思うので先にまとめちゃいます！知識として覚えておきましょう！
そもそも
フレックスボックス（flexbox）とは、
アイテムを行（row）または列（column）に並べるためのレイアウト方法です。（mdn）
それに関連して
「フレックスボックス」は、主軸（main axis）と交差軸（cross axis）という概念があります。「フレックスアイテム」の並ぶ向きは、flex-direction というプロパティで「行（row）」か「列（column）」を設定することができます。そこ設定した並ぶ向きが主軸となります。
flex-direction: row;（またはflex-direction: row-reverse;）の場合は、主軸は「行（row）」、横向き（水平方向）になり、
flex-direction: column;（またはflex-direction: column-reverse;）の場合は、主軸が「列（column）」、縦方向（垂直方向）になります。
そして、細かな並びを設定するスタイルはこの主軸の向きを基準に並びます！
文章にするとややこしいですが、言ってしまえば、結局は“横か縦か”ってことなのですが……！！！どちらにせよ今後は「主軸」と「交差軸」というものを意識しながら考え方を少しずつでもアップデートしていきましょう！
フレックスボックスの
デフォルトの状態
さて、
「フレックスボックス」を設定した場合に生じる仕様、概念があります。これは W3C が定めた公式仕様（CSS Flexible Box Layout Module）に基づいており、そういうものだと覚えましょう！
display: flex;を設定した親要素が「フレックスコンテナ（flex contaner）」、その子要素が「フレックスアイテム（flex items）」と呼ばれます。
ハンバークをパンで挟んだその瞬間から、それはハンバーガーになり、パンがバンズ、ハンバーグがパティという存在になるような……概念……？
そしてdisplay: flex;を設定することにより、「フレックスコンテナ」と「フレックスアイテム」にはそれぞれたくさんのデフォルトのスタイルが適用されます。
フレックスコンテナに適用される
５つのデフォルトスタイル
①flex-direction: row;
②flex-wrap: nowrap;
③justify-content: flex-start;
（公式ではjustify-content: normal;が初期値だが、同様の動きをする。）
④align-items: stretch;
（公式ではalign-items: normal;
⑤align-content: stretch;
（公式ではalign-content: normal;
フレックスアイテムに適用される
２つのデフォルトスタイル
①order: 0;
②flex: 0 1 auto;
flex プロパティは、flex-grow、flex-shrink、flex-basis の３つのプロパティを一括して設定できるショートハンドです。
③align-self: auto;
display: flex;を記述するだけで、『なんだかちゃんと並んでしまう』というのにはこれほどのたくさんのスタイルが隠されていた、もとい、デフォルトで適用されていたからなのですね！そして必要に応じてスタイルを変更すれば、思い通りの“並び”にできるってわけです！
フレックスアイテムの並び方は、
フレックスボックスで設定する
フレックスアイテムの並び方をコントロールするには、フレックスアイテム自身にではなく、フレックスコンテナをセレクタにしてスタイルを設定します。
私は、“float あがり”の古い人間だったので、その辺がなんかごちゃごちゃになっちゃいました。、なんのこっちゃっ！て人は気にしないでいただけたらと思います。
まとめ
フレックスボックスは、親要素にdisplay: flex;を設定することで使用できます。フレックスボックスにすることで親要素はフレックスコンテナ、子要素はフレックスアイテムと呼ばれます。
フレックスアイテムが並ぶ方向を主軸(main axis)、それに交差する方向を交差軸(cross axis)と呼びます。縦と横とはまた違った概念です。
今回は基本の知識的な部分を中心にまとめてみました。並びの方向を変更したり、順番を指定するなどの細かいことはまた別の機会にまとめられたらと思います。すごくたくさんのデフォルトスタイルが適用されていて複雑そうに見えますが、使ってみると意外と簡単なので恐れずに使っていきましょう！
出典・参考文献
・weblio. 「flexとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/flex, 2024年6月20日閲覧。
・W3C. 「CSS Flexible Box Layout Module Level 1」. https://drafts.csswg.org/css-flexbox/, 2024年6月29日閲覧。
