Platz verteilen
Breite und Höhe der Elemente (Flex Items) innerhalb einer Flexbox können wie alle Breiten- oder Höhenangaben als px, em oder in Prozentanteilen festgelegt werden.
flex-shrink, flex-grow und flex-basis sind Eigenschaften der Flex-Elemente – den direkten Nachkommen eines Flex-Containers. Ohne die Angabe von flex-shrink, flex-grow und flex-basis können die Inhalte der Flex-Items größer oder kleiner als der Raum des Flex-Containers sein.
- Wenn der Raum zu klein ist, um die volle Breite der Flex-Items aufzunehmen, verkleinert flex-shrink die Elemente.
- Wenn der Raum größer ist, verteilt flex-grow den überschüssigen Raum.
display-flex ist zuverlässiger und intuitiver als eine Positionierung auf der Basis von float. flex-grow, flex-shrink und flex-basis hingegen bildet bei aller Flexibilität ein komplexes Geflex.
Die Beispiele hier beschränken sich auf eine Zeile und sind ohne padding und border, damit sie einfacher nachzuvollziehen sind.
flex-shrink
flex-shrink legt fest, um welchen Faktor ein Flex-Item gegenüber den anderen Flex-Items schrumpft, wenn der Raum des Flex-Containers zu klein wird.
Der Vorgabewert ist 1 – anteilig. flex-shrink : 0 verhindert das Verkleinern des Flex-Items.
.flexitem:nth-child(1) { flex-shrink: 1}
.flexitem:nth-child(2) { flex-shrink: 1; background: orange}
.flexitem:nth-child(3) { flex-shrink: 1}
Sobald ein Element mit flex-grow oder flex-shrink deklariert ist, erstrecken sich die Items über die komplette Zeile. Angaben wie justify-content: space-between oder space-around werden ignoriert. Für den Abstand zwischen den Flex-Elementen sorgt hier die CSS-Eigenschaft gap (nicht IE11).
flex-grow
flex-grow ist der Faktor für die Aufteilung des freien Raums (wenn der Flex-Container größer ist als die Inhalte): flex-grow ist der Wachstums-Faktor gegenüber den anderen Flex-Items.
flex-grow:2 besagt nicht, dass ein Element doppelt so groß wie Elemente mit flex-grow:1 werden – nur sein Anteil am Wachstum ist doppelt so groß wie der Anteil der Items mit flex-grow:1 (dem Vorgabewert).
- 0: Nicht verbreitern. Entweder die Breite des Elements oder flex-basis.
- 1: Vorgabe: Gleiche Breite wie alle Flex Items innerhalb der Zeile.
- ≥2: Verbreitern um den Faktor 2 gegenüber allen übrigen Flex-Items, die mit flex-grow:1 notiert sind.
.flexitem:nth-child(1) { flex-grow:1}
.flexitem:nth-child(2) { flex-grow:1; background: orange; }
.flexitem:nth-child(3) { flex-grow:1}
Beispiel für flex-grow
Breite der Flexbox: 800px
Breite der Flex-Items: je 160px
Freier Platz: 800 - 3*160 = 320px
.flexitem:nth-child(1) { flex-grow: 1} = 320: 4 = 80
.flexitem:nth-child(2) { flex-grow: 2} = 320: 4 * 2 = 160
.flexitem:nth-child(3) { flex-grow: 1} = 320: 4 = 80
Nach der Verteilung des freien Raums
.flexitem:nth-child(1) 160px + 80px = 240px .flexitem:nth-child(2) 160px + 160px = 320px .flexitem:nth-child(3) 160px + 80px = 240px
flex-basis
flex-basis ist die anfängliche Breite der Flex-Items, bevor freier Platz unter den Items verteilt wird. flex-basis kann ein absoluter Wert oder ein Anteil in % sein.
Mögliche Werte
auto, 10em, 200px, 10%
.fb:nth-child(1) { flex-basis: 25%}
.fb:nth-child(2) { flex-basis: 15%; background-color:orange}
.fb:nth-child(3) { flex-basis: 25%}
Kurzschrift flex
Flex ist die Kurzschrift für flex-shrink, flex-grow und flex-basis.
.ff:nth-child(1) { flex: 1 1 10%}
.ff:nth-child(2) { flex: 1 1 25%}
.ff:nth-child(3) { flex: 1 1 10%}
Auch wenn die Inhalte der Flex-Items nur 45% ausmachen: Die Flexbox erstreckt sich über die gesamte Breite, denn in der Kurzschrift stecken flex-shrink und flex-grow.
margin in Flex-Containern
Der Abstand zwischen neben- und untereinander liegenden Flex-Item kann über justify-content und die Breite der Flex-Items geregelt werden oder mittels der CSS-Eigenschaft margin.
