2016年09月09日
CSS3のプロパティについて解説する連載です。今回は、box要素の伸縮が指定できる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の効果がわかりやすいです。
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の値を変えた場合の例です。
div.first { box-flex: 1.0; } div.second { box-flex: 3.0; } div.third { box-flex: 2.0; }
最後の例は、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などのプロパティがあります。レイアウトの自由度が上がるので、上手に使っていきたいですね。
今すぐ無料で見積もりを依頼する
「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」
そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。
「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。