Pocket

最近はflexboxを使うことが多くなってきてますが、都度調べているので備忘録的にまとめようと思います。このブログもレイアウトにはflexboxを使っています。

flexoxのプロパティの種類について

flexboxのプロパティは全部で12個。大きく分けると「並び順」「整列系」「幅・伸縮率指定」の3つに分けられます。

それぞれ4つずつ分けられます。今回は「整列系」を指定する4種類について書きます。

justify-content

justify-contentは水平方向の要素の配置を指定するプロパティです。

説明
flex-start(デフォルト) 左詰めに配置
flex-end 右詰めに配置
center 中央に配置
space-between 最初と最後を両端に配置し、残りを等間隔に配置
space-around 全ての要素を等間隔に配置

以下、サンプルです。

See the Pen justify-content by misumi (@mismith0227) on CodePen.

align-items

align-itemsは垂直方向の要素の配置を指定するプロパティです。

説明
stretch(デフォルト) 親の要素の高さいっぱいに配置
flex-start 垂直方向の上に配置
flex-end 垂直方向の下に配置
center 垂直方向の中央に配置
baseline テキストのベースラインを揃えて配置

以下、サンプルです。

See the Pen align-items by misumi (@mismith0227) on CodePen.

align-content

align-contentは縦方向の余白を均等にならべたりしてくれるプロパティです。

説明
stretch(デフォルト) 親の高さいっぱいに要素が配置されるように均等に
flex-start 親の上方と要素の始点が合うように配置
flex-end 親の下方と要素の終点が合うように配置
center 垂直方向の中央に配置
space-between 親の上方と下方が要素の始点・終点に合うようにし、残りは均等に配置
space-around 垂直方向に均等に配置

以下、サンプルです。

See the Pen align-content by misumi (@mismith0227) on CodePen.

align-self

align-selfは各要素に指定して、align-itemsで指定したプロパティより優先させるプロパティです。

説明
stretch(デフォルト) 親の要素の高さいっぱいに配置
flex-start 垂直方向の上に配置
flex-end 垂直方向の下に配置
center 垂直方向の中央に配置
baseline テキストのベースラインを揃えて配置

以下、サンプルです。

See the Pen align-self by misumi (@mismith0227) on CodePen.

さいごに

flexboxのプロパティについて、特徴で分けて書いてみました。他のプロパティの参考にぜひ。

Pocket

Category : Tag :