flexbox
Pocket

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

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

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

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

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のプロパティについて、特徴で分けて書いてみました。他のプロパティの参考にぜひ。

Pocket

Category : Tag :