制作会社様とのやり取りに特化したコーディング代行ならくまWebにお任せください！

CSS3のプロパティについて解説する連載です。今回は、box要素の伸縮が指定できるbox-flexとbox-flex-groupを取り上げます。

box-flex/box-flex-groupの指定方法

box-flexとbox-flex-groupは、box要素のスタイルを指定するためのFlexible Box Layoutモジュールのプロパティです。box-flexプロパティは、Flexible Box（伸縮ボックス）における伸縮比率を指定します。デフォルトは0.0です。

box-flex: 数値;

一方で、box-flex-groupはFlexible Boxをグルーピングして、優先順位を指定します。デフォルトは1で、1以上の整数（自然数）を指定します。数値が最も低い1が優先され、数値が高くなるほど優先度が下がります。

box-flex-group: 数値;

box-flex/box-flex-groupの具体例

box-flex/box-flex-groupの具体例を見ていきましょう。

box-flexを指定しなかった場合は、下のように表示されます。これと比較すると、box-flexの効果がわかりやすいです。

box-flexに1.0を指定

3つの要素にbox-flexを指定した場合です。数値は全て、1.0にしています。

div.first {
  box-flex: 1.0;
}
div.second {
  box-flex: 1.0;
}
div.third {
  box-flex: 1.0;
}

3つの要素でbox-flexの値を変える

次に、3つの要素でbox-flexの値を変えた場合の例です。

div.first {
  box-flex: 1.0;
}
div.second {
  box-flex: 3.0;
}
div.third {
  box-flex: 2.0;
}

box-flex-groupを使った場合

最後の例は、box-flex-groupを使った場合です。box-flexの値は全て1.0なのですが、box-flex-groupの値によって伸縮に違いが出ていることがわかります。

div.first {
  box-flex: 1.0;
  box-flex-group:1;
}
div.second {
  box-flex: 1.0;
  box-flex-group:2;
}
div.third {
  box-flex: 1.0;
  box-flex-group:2;
}

あとがき

box要素の伸縮を指定する、box-flexとbox-flex-groupについてご紹介しました。Flexible Box Layoutモジュールには他にも、box-orientやbox-linesなどのプロパティがあります。レイアウトの自由度が上がるので、上手に使っていきたいですね。