1. フレックスグローとは、フレックス項目が占める幅を拡張することを指します。拡張されたスペースは、要素を除外した後の残りの空白スペースです。
2. 負の値はサポートされていません。デフォルト値は 0 です。これは、残りの空白が幅を拡張するために占有されないことを意味します。
flex-grow が 0 より大きい場合、フレックス コンテナー内の残りのスペースの割り当てが行われます。
例
// HTML 部分// 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 属性の概要です。皆様のお役に立てれば幸いです。