【Flexbox】幅・伸縮率を指定するflexboxのプロパティ

Posted on2017年1月15日 by misumi_takuma

Pocket

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

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

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

それぞれ4つずつ分けられます。今回は「幅・伸縮率指定」を指定する4種類について書きます。

flex-growは数値を1にすれば全て均等に、また指定した数字の割合で要素を拡大してくれます。

flex-growはポジティブなスペース、つまり横幅の余分なスペースも使って拡大します。

.grow {
  // 指定方法
  flex-grow: 数字;
  // 例
  flex-grow: 2;
}

以下、サンプルです。

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

flex-shrinkは数値を1にすれば全て均等に、また指定した数字の割合で要素を縮小してくれます。

flex-shrinはflex-growとは逆でネガティブなスペース、横幅が足りない場合に縮小率に応じて収まるように調整してくれます。なので、親要素の幅に中の要素が収まりきっている場合は均等になります。

.shrink {
  // 指定方法
  flex-shrink: 数字;
  // 例
  flex-shrink: 2;
}

以下、サンプルです。

See the Pen flex-shrink by misumi (@mismith0227) on CodePen.

flex-basisはちょっと分かりづらかったんですが、おそらく指定したpxから割合を計算して配置するのかと思います。指定したpx分確保できる場合はそのpx、それより小さくなる場合は他の要素のpxとの割合を計算してくれる感じです（間違ってたら訂正します）。

.basis {
  // 指定方法
  flex-basis: 数字px;
  // 例
  flex-basis: 200px;
}

以下、サンプルです。

See the Pen flex-basis by misumi (@mismith0227) on CodePen.

flexは、「flex-grow」「flex-shrink」「flex-basis」のショートハンドです。

.basis {
  // 指定方法
  flex: <flex-growプロパティの値< <flex-shrinkプロパティの値> <flex-basisプロパティの値>;
  // 例
  flex:1 1 200px;
}

以下、サンプルです。

See the Pen flex by misumi (@mismith0227) on CodePen.

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

Pocket