同じ親ボックス内の子ボックス同士の配置は、方向・整列・配分の3つのルールによって決まります。

これらは、親ボックス選択時に上下左右に現れるボタンで制御します。

方向

上下左右の4方向からボックスの並ぶ方向を設定することができます。

また、z型の矢印を選択することで、ボックスの折返しが設定できます。

整列

ボックスの進行方向に対して、子要素を左揃え右揃え中央揃え両端揃えに設定することができます。

※ 両端揃えを選択すると、幅をautoに設定した子要素が、自動的に親ボックスいっぱいの幅を取るようになるため、リストアイテムの幅を揃えたいときなどに便利です。

配分

ボックスの進行方向の配分を設定できます。後ろ寄せ真ん中前寄せの他に、均等配分も設定できます。

flex direction wrap align distribute stretch

ストレッチ ディレクション

回答が見つかりましたか?