Flexboxのまとめ

コンテナーと呼ばれる親要素の中に、並べたい子要素を入れる。

親要素の中に子要素を入れた状態

上から順に縦に並んでいる状態。 画像をdivタグの中に入れて、幅を120pxに指定している。

親要素にdisplayプロパティを指定する

親要素に「display: flex;」を適用すると子要素が横並びになる。

flex-directionプロパティ

子要素をどの方向に配置していくかを指定する。

row(初期値) →左から右→

row-reverse ←右から左←

column ↓上から下↓

column-reverse ↑下から上↑

flex-wrapプロパティ

子要素を折り返すときの配置方向を指定する。初期値はno-wrapで折り返さない。

wrap 上から下に並べていく

wrap-reverse 下から上に並べていく

justify-contentプロパティ

親要素の空きスペース内で、どのように子要素を横(水平)方向で並べるかを指定する。
見やすくするためにコンテナーにpaddingを設定している。

flex-start(初期値) 左揃えに並ぶ

flex-end 右揃えに並ぶ

flex-center 中央揃え

space-between 両端と均等配置

space-around 均等配置

align-itemsプロパティ

親要素の空きスペース内で、どのように子要素を縦(垂直)方向で並べるかを指定する。

適用させるには親要素に高さを指定する必要がある。

flex-start 上に揃える

flex-end 下に揃える

center 中央揃え