1. フレックスグローとは、フレックス項目が占める幅を拡張することを指します。拡張されたスペースは、要素を除外した後の残りの空白スペースです。
2. 負の値はサポートされていません。デフォルト値は 0 です。これは、残りの空白が幅を拡張するために占有されないことを意味します。
flex-grow が 0 より大きい場合、フレックス コンテナー内の残りのスペースの割り当てが行われます。
例
// HTML 部分 <div>
<div></div>
<div></div>
<div></div>
</div>
// CSS part.box{
幅: 600ピクセル;
高さ: 200ピクセル;
境界線: 1 ピクセルの実線。
ディスプレイ: フレックス;
}
.box div:nth-of-type(1){
幅: 100ピクセル;
高さ: 100ピクセル;
背景色: 赤;
}
.box div:nth-of-type(2){
幅: 150ピクセル;
高さ: 100ピクセル;
背景色: スカイブルー;
}
.box div:nth-of-type(3){
幅: 200ピクセル;
高さ: 100ピクセル;
背景色: 黄色;
}上記は CSS の flex-grow 属性の概要です。皆様のお役に立てれば幸いです。