【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
flex-direction
flex-directionはderectionと名前のつくとおり、ならべる方向を指定するプロパティです。
値 | 説明 |
---|---|
row(デフォルト) | 左から右へ・横並び |
row-reverse | 右から左へ・横並び |
column | 上から下へ・縦並び |
column-reverse | 下から上へ・縦並び |
以下、サンプルです。
See the Pen flex-direction by misumi (@mismith0227) on CodePen.
flex-wrap
flex-wrapは折り返しについて指定するプロパティです。
値 | 説明 |
---|---|
nowrap(デフォルト) | 折り返しなし |
wrap | 折り返す・下へ折り返す |
wrap-reverse | 折り返す・上へ折り返す |
以下、サンプルです。
See the Pen flex-wrap by misumi (@mismith0227) on CodePen.
flex-flow
flex-flowはflex-directionとflex-wrapをショートハンドで記述できるプロパティです。以下のように指定します。
.parent1 { display: flex; // 指定方法 flex-flow: <flex-direction> <flex-wrap>; // 例 flex-flow: row-reverse nowrap; }
以下、サンプルです。
See the Pen flex-flow by misumi (@mismith0227) on CodePen.
order
orderは指定した順番通りに並べてくれます。これはdisplay:flex;を指定する親ではなく、一つ一つの要素に指定します。
.parent { display: flex; } .order1 { order: 1; } .order2 { order: 2; } .order3 { order: 3; } .order4 { order: 4; } .order5 { order: 5; }
以下、サンプルです。
See the Pen order by misumi (@mismith0227) on CodePen.
さいごに
flexboxのプロパティについて、特徴で分けて書いてみました。他のプロパティの参考にぜひ。
- 【Flexbox】並び順を指定するflexboxのプロパティ
- 【Flexbox】整列を指定するflexboxのプロパティ
- 【Flexbox】幅・伸縮率を指定するflexboxのプロパティ