Verständnis der Eigenschaften von Flex-Elementen
Flex-Items sind die Kindelemente des Flex-Containers. Sie sind keine Inline- oder Block-Elemente mehr. Daher können die Eigenschaften der Items angepasst werden, um die gewünschte Positionierung zu erreichen.
flex-basis
Die Eigenschaft flex-basis definiert die Ausgangsgröße eines Flex-Items, bevor verbleibender Platz verteilt wird. Sie legt die ideale Größe eines Flex-Items fest, die je nach verfügbarem Platz und anderen Eigenschaften des Flex-Containers angepasst werden kann.
flex-basis: auto | value;
Die Größe kann in Pixeln, Prozentwerten oder em angegeben werden, um die ideale Größe zu bestimmen, oder auf auto gesetzt werden, wodurch der Browser die Größe anhand des Inhalts des Items bestimmt.
index.html
index.css
flex-grow
Die Eigenschaft flex-grow bestimmt die Fähigkeit eines Flex-Items, im Verhältnis zu anderen Elementen innerhalb eines Flex-Containers zu wachsen, wenn zusätzlicher Platz verfügbar ist.
Die Eigenschaft flex-grow akzeptiert einen einheitenlosen Wert, der die relative Größe des Flex-Items im Vergleich zu anderen Elementen angibt. Zum Beispiel: Wenn ein Element einen flex-grow-Wert von 2 und ein anderes einen Wert von 1 hat, wächst das erste Element doppelt so stark wie das zweite, sobald im Flex-Container zusätzlicher Platz vorhanden ist.
index.html
index.css
order
Die Eigenschaft order wird verwendet, um die Anzeigereihenfolge von Flex-Elementen innerhalb ihres Containers zu definieren. Standardmäßig werden Flex-Elemente in der Reihenfolge angezeigt, in der sie im HTML-Dokument erscheinen. Mit der Eigenschaft order kann diese Reihenfolge jedoch angepasst werden.
Der Wert von order kann jede beliebige Zahl sein. Selbst wenn nur drei Elemente vorhanden sind, bedeutet die Zuweisung von order: 1000; zum zweiten Element nicht, dass es 1000 Elemente gibt. Es bedeutet lediglich, dass das zweite Element an die letzte Position verschoben wird. Haben mehrere Elemente denselben order-Wert, ordnet der Browser sie entsprechend ihrer Reihenfolge im HTML-Dokument an. Im Folgenden soll die order der Elemente in der Liste neu angeordnet werden. Die Aufgabe besteht darin, das dritte Element an die erste Position zu setzen.
index.html
index.css
1. Was bewirkt die Eigenschaft flex-grow?
2. Was bewirkt die Eigenschaft flex-basis?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.56Verständnis der Eigenschaften von Flex-Elementen
Swipe um das Menü anzuzeigen
Flex-Items sind die Kindelemente des Flex-Containers. Sie sind keine Inline- oder Block-Elemente mehr. Daher können die Eigenschaften der Items angepasst werden, um die gewünschte Positionierung zu erreichen.
flex-basis
Die Eigenschaft flex-basis definiert die Ausgangsgröße eines Flex-Items, bevor verbleibender Platz verteilt wird. Sie legt die ideale Größe eines Flex-Items fest, die je nach verfügbarem Platz und anderen Eigenschaften des Flex-Containers angepasst werden kann.
flex-basis: auto | value;
Die Größe kann in Pixeln, Prozentwerten oder em angegeben werden, um die ideale Größe zu bestimmen, oder auf auto gesetzt werden, wodurch der Browser die Größe anhand des Inhalts des Items bestimmt.
index.html
index.css
flex-grow
Die Eigenschaft flex-grow bestimmt die Fähigkeit eines Flex-Items, im Verhältnis zu anderen Elementen innerhalb eines Flex-Containers zu wachsen, wenn zusätzlicher Platz verfügbar ist.
Die Eigenschaft flex-grow akzeptiert einen einheitenlosen Wert, der die relative Größe des Flex-Items im Vergleich zu anderen Elementen angibt. Zum Beispiel: Wenn ein Element einen flex-grow-Wert von 2 und ein anderes einen Wert von 1 hat, wächst das erste Element doppelt so stark wie das zweite, sobald im Flex-Container zusätzlicher Platz vorhanden ist.
index.html
index.css
order
Die Eigenschaft order wird verwendet, um die Anzeigereihenfolge von Flex-Elementen innerhalb ihres Containers zu definieren. Standardmäßig werden Flex-Elemente in der Reihenfolge angezeigt, in der sie im HTML-Dokument erscheinen. Mit der Eigenschaft order kann diese Reihenfolge jedoch angepasst werden.
Der Wert von order kann jede beliebige Zahl sein. Selbst wenn nur drei Elemente vorhanden sind, bedeutet die Zuweisung von order: 1000; zum zweiten Element nicht, dass es 1000 Elemente gibt. Es bedeutet lediglich, dass das zweite Element an die letzte Position verschoben wird. Haben mehrere Elemente denselben order-Wert, ordnet der Browser sie entsprechend ihrer Reihenfolge im HTML-Dokument an. Im Folgenden soll die order der Elemente in der Liste neu angeordnet werden. Die Aufgabe besteht darin, das dritte Element an die erste Position zu setzen.
index.html
index.css
1. Was bewirkt die Eigenschaft flex-grow?
2. Was bewirkt die Eigenschaft flex-basis?
Danke für Ihr Feedback!
