FlexBox（フレックスボックス）って何？

FlexBoxとは、HTMLにおける各要素の配置を決めるパターンの総称です。

HTMLでは、CSSにdisplayプロパティを記述することで、表示されている要素を横並びにできます。

この横並びにした要素の配置を、FlexBoxで詳細に決めることができます。

このFlexBoxの適用パターンは、３つあります。

一つ目は、横並びにした要素の順番を変更したいときに適用する「flex-directionプロパティ」です。要素の順番を逆向きにするなどの変更ができます。

２つ目は、横並びにした各要素の垂直方向の位置を調整したい時に適用させる「aline-itemsプロパティ」です。横並びにした要素を、親要素の真ん中に置いたりできます。

３つ目は、各要素間の調整を行いたい時に適用させる「justify-contentプロパティ」です。適用させることで、「横の要素との間隔を12px開ける」といった調整ができます。

これらの３つの適用パターンを使い分けることで、要素の位置をより詳細に設定できるようになります。