1. Flex-Grow bezieht sich auf die Erweiterung der von Flex-Elementen eingenommenen Breite. Der erweiterte Raum ist der verbleibende Leerraum nach dem Ausschließen der Elemente.
2. Negative Werte werden nicht unterstützt. Der Standardwert ist 0, was bedeutet, dass der verbleibende Leerraum nicht zur Erweiterung seiner Breite belegt wird.
Wenn Flex-Grow größer als 0 ist, erfolgt die Zuweisung des verbleibenden Speicherplatzes im Flex-Container.
Beispiel
// HTML-Teil <div>
<div></div>
<div></div>
<div></div>
</div>
// CSS part.box{
Breite: 600px;
Höhe: 200px;
Rand: 1 Pixel fest;
Anzeige: Flex;
}
.box div:nth-of-type(1){
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: rot;
}
.box div:nth-of-type(2){
Breite: 150px;
Höhe: 100px;
Hintergrundfarbe: Himmelblau;
}
.box div:nth-of-type(3){
Breite: 200px;
Höhe: 100px;
Hintergrundfarbe: gelb;
}Das Obige ist eine Einführung in das Flex-Grow-Attribut in CSS. Ich hoffe, es wird für alle hilfreich sein.