【Flexbox】整列を指定するflexboxのプロパティ
最近はflexboxを使うことが多くなってきてますが、都度調べているので備忘録的にまとめようと思います。このブログもレイアウトにはflexboxを使っています。
flexoxのプロパティの種類について
flexboxのプロパティは全部で12個。大きく分けると「並び順」「整列系」「幅・伸縮率指定」の3つに分けられます。
それぞれ4つずつ分けられます。今回は「整列系」を指定する4種類について書きます。
- flex-direction
- flex-wrap
- flex-flow
- order
- justify-content
- align-items
- align-content
- align-self
- flex-grow
- flex-shrink
- flex-basis
- flex
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のプロパティについて、特徴で分けて書いてみました。他のプロパティの参考にぜひ。
- 【Flexbox】並び順を指定するflexboxのプロパティ
- 【Flexbox】整列を指定するflexboxのプロパティ
- 【Flexbox】幅・伸縮率を指定するflexboxのプロパティ