2024-09-29
デフォルトでは要素は上下にブロック要素として表示される。
display: flex
を親に追加すると要素は列に配置される。
.wrapper { display: flex; }
display: flex
が適用された要素をフレックスコンテナという。
主軸の方向や向き(通常または逆方向)を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定するプロパティ。
/* 行のテキストの方向に配置 */ flex-direction: row; /* 積み重なるように配置する */ flex-direction: column;
flex-direction: column
によりフレックスコンテナーの主軸は、ブロック軸と同じになる。
flexbox における主軸は、flex-direction プロパティの設定方向によって定義される。
参考:MDN 主軸
フレックスボックスでは、直接の子要素に交差軸方向のアイテムの配置を制御する。 以下の設定により、子要素は水平方向の中央寄せとなる。
.wrapper { display: flex; flex-direction: column; align-items: center; }
主軸と直角に交差する軸のこと。
参考:MDN 交差軸