flex-grow プロパティ
flex-grow プロパティは、フレックスコンテナの幅に余白ができる場合に、子エレメント（フレックスアイテム）の幅を指定するプロパティです。
指定されたフレックスアイテムはフレックスコンテナに余り幅がないように拡がります。
このプロパティは子エレメント（フレックスアイテム）に指定します。値は伸長比で指定し、他のアイテムとの相対比となります。
.parent {
display: flex;
}
.flex_item{
flex-grow: 2;
}
フレックスコンテナとはdisplay:flex;が設定されたエレメントです。
似たプロパティに、flex-basis、flex-shrinkがあります。
flex-basisは内容の幅または絶対値で指定します。
flex-shrinkプロパティはフレックスアイテムが横に並びきらない場合の縮小比の指定です。
ページ内 Index
構文(Syntax)
CSS
flex-grow: number | initial | inherit ;
DOM ( JavaScript )
String = object.style.flexGrow;
object.style.flexGrow=" number | initial | inherit ";
値（Values）
| Value | 摘要 |
|---|---|
| none | 初期値（default値） |
| number | 伸長比 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | 0 |
| 継承（Inherited） | No |
| CSS Animation | Yes |
Example
flex-grow の例です。flex-grow プロパティはフレックスアイテム（子エレメント）に指定します。
フレックスコンテナの幅は余白ができるように設定してあります。
flex-grow プロパティによってフッレックスコンテナの幅に余白がないようにフレックスアイテムが拡がります。アイテム B が1、アイテム A が 2 の比率で拡がります。
flex-grow の設定がない場合
以下は上記例の flex-grow の設定がない場合です。余り分があることが分かります。