flexbox3
Pocket

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

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

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

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

flex-grow

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

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

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

以下、サンプルです。

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

flex-shrink

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

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は、「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

カテゴリー: タグ: