CSS3

プロパティ

flex-grow

→●、mdn

flex アイテムのサイズ伸長度。

注意： 作者には、flex-grow を直に利用せずに、flex 略式プロパティを利用して flex 能を制御することが奨励される。この略式プロパティは、よくある用途に適応するように、未指定な成分を正しく設定し直すので。

<number> ○

flex-grow 下位プロパティを設定して、flex 伸長係数 を指定する。負な数は許容されない。

flex コンテナの中で正な free 空間が配分される際に、flex アイテムが他の一連の flex アイテムに比して どれだけ伸長することになるのかを決定する。省略されたときは、1 に設定される。

0 ～ 1 の合間の flex 値には、ある特別なふるまいがある： 同じ行°上にあるアイテムたちの flex 値の総和が 1 に満たない場合、それらが占める free 空間は 100% に満たなくなる。

¶詳細省く

<DIV style="width:200px; height:100px; border:1px solid black;
 display:flex;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="flex-grow:0.1; border:1px solid red">2</DIV>
 <DIV style="flex-grow:0.3; border:1px solid red">3</DIV>
</DIV>

<DIV style="width:200px; height:100px; border:1px solid black;
 display:flex;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-grow:0.1; flex-basis:40px; border:1px solid red">2</DIV>
 <DIV style="flex-grow:0.3; flex-basis:40px; border:1px solid red">3</DIV>
</DIV>

<DIV style="width:200px; height:200px; border:1px solid black;
 display:flex;
 flex-direction:column;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="flex-grow:0.1; border:1px solid red">2</DIV>
 <DIV style="flex-grow:0.3; border:1px solid red">3</DIV>
</DIV>

<DIV style="width:200px; height:200px; border:1px solid black;
 display:flex;
 flex-direction:column;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-grow:0.1; flex-basis:40px; border:1px solid red">2</DIV>
 <DIV style="flex-grow:0.3; flex-basis:40px; border:1px solid red">3</DIV>
</DIV>

関連

flex-basis、flex-shrink。

テスト