【Flexbox】並び順を指定するflexboxのプロパティ
Tweet
Pocket
最近は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のプロパティ
Tweet
Pocket
