Die Flex-Eigenschaft in CSS ist eine Abkürzung für Flex-Wachstum, Flex-Schrumpf, und Flex-Basis . Es funktioniert nur bei Flex-Items. Wenn es sich bei dem Container-Item also nicht um ein Flex-Item handelt, gilt: biegen Eigentum hat keinen Einfluss auf den entsprechenden Artikel.

Mit dieser Eigenschaft wird die Länge flexibler Elemente festgelegt. Mit dieser CSS-Eigenschaft ist die Positionierung von untergeordneten Elementen und des Hauptcontainers einfach. Es wird verwendet, um festzulegen, wie ein Flex-Element schrumpft oder wächst, um in den Raum zu passen.

Der biegen Die Eigenschaft kann durch einen, zwei oder drei Werte angegeben werden.

• Bei der Einwert-Syntax muss der Wert entweder eine Zahl oder Schlüsselwörter wie z. B. sein keine, automatisch, oder anfänglich .
• Bei der Zwei-Werte-Syntax muss der erste Wert eine Zahl sein (verwendet als). Flex-Grow ), der zweite Wert kann entweder eine Zahl sein (verwendet für Flex-Schrumpf ) oder ein gültiger Breitenwert (verwendet als Flex-Basis ).
• Wenn es eine Drei-Werte-Syntax gibt, müssen die Werte der Reihenfolge folgen: a Nummer für die Flex-Grow, A Nummer für die Flex-Schrumpf, und ein gültiges Breite Wert für Flex-Basis .

Syntax

 flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit; 

Immobilienwerte

Flex-Grow: Es ist eine positive Zahl ohne Einheit, die den Flex-Wachstumsfaktor bestimmt. Es gibt an, wie stark der Artikel im Vergleich zu den anderen flexiblen Artikeln wächst. Negative Werte sind nicht zulässig. Wenn es weggelassen wird, wird es auf den Wert gesetzt 1 .

Flex-Schrumpf: Es ist die positive Zahl ohne Einheit, die den Flex-Schrumpffaktor bestimmt. Es gibt an, wie stark der Artikel im Vergleich zu den anderen flexiblen Artikeln schrumpft. Negative Werte sind nicht zulässig. Wenn es weggelassen wird, wird es auf den Wert gesetzt 1 .

Flex-Basis: Es ist die Länge in relativen oder absoluten Einheiten, die die anfängliche Länge des Flex-Elements definiert. Es wird verwendet, um die Länge des Flex-Elements festzulegen. Seine Werte können sein Auto, erben, oder eine Zahl gefolgt von den Längeneinheiten wie z em, px, usw. Negative Werte sind nicht zulässig. Wenn es weggelassen wird, wird es auf den Wert gesetzt 0 .

Auto: Dieser Wert der Flex-Eigenschaft entspricht 1 1 Auto .

keiner: Dieser Wert der Flex-Eigenschaft entspricht 0 0 automatisch . Die Flex-Elemente werden dadurch weder vergrößert noch verkleinert.

anfänglich: Es setzt die Eigenschaft auf ihren Standardwert. Es ist gleichbedeutend mit 0 0 automatisch .

erben: Es erbt die Eigenschaft von seinem übergeordneten Element.

Beispiel

In diesem Beispiel gibt es drei Container mit jeweils drei Flex-Items. Der Breite und Höhe der Behälter betragen 300px Und 100px .

Wir wenden die an Flex: 1; zu den Flex-Items des ersten Containers, Flex: 0 50px; zu den Flex-Items des zweiten Containers, und Flex: 2 2; zu den Flex-Items des dritten Containers.

 CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> 

Ausgabe