CSS/Eigenschaften/Flexbox/flex

Aus SELFHTML-Wiki
< CSS | Eigenschaften | Flexbox(Weitergeleitet von Flex)
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[Bearbeiten] flex

Die Eigenschaft flex legt im Flexible Box Layout Module die Breite (und Höhe) eines Flex Items fest. Sie ist die zusammenfassende Eigenschaft von flex-grow, flex-shrink und flex-basis.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Mit flex-basis können sie eine Basisbreite angeben, wobei sich das flexible Element an den tatsächlich verfügbaren Platz anpasst, indem es die Leerräume zwischen den Elementen gleichmäßig verteilt. Mit flex-grow und flex-shrink können Sie Wachstum- und Schrumpffaktoren bestimmen, die das Verhalten bei geringeren und breiteren Breiten regelt.

Einer der großen Vorteile der Flexbox ist die einfache Handhabung. Wenn man bisher mehrere Elemente nebeneinander platzieren wollte, musste man (wenn auch einfache) mathematische Rechnungen anstellen, um auf die gewünschten Prozentwerte für Breiten zu kommen. Mit der einfachen Einstellung flex: 1; bekommen alle Elemente die gleiche Breite. Soll ein Element doppelt so groß werden, ist dies einfach zu bewerkstelligen:

Beispiel: relative Breiten
nav, footer {
  flex: 1;
}
main {
  flex: 2;
}

Folgende Angaben sind möglich:

  • Zahl: positive Zahl, entspricht flex: [Zahl] 1 0%
  • none: entspricht flex: 0 0 auto
  • auto: entspricht flex: 1 1 auto
  • initial: entspricht flex: 0 1 auto
Empfehlung: Verwenden Sie die zusammenfassende Eigenschaft flex, dabei ist es aber vorteilhaft, neben einem Wert für flex-grow auch Werte für flex-shrink und flex-basis anzugeben.
Beachten Sie: Der Internet Explorer hat in den Versionen 10 und 11 einen Bug, der in der Shorthand-Eigenschaft flex Angaben für flex-basis ignoriert, wenn Sie keine Einheiten haben.
Verwenden Sie flex: 1 1 0%; anstelle von flex: 1 1 0; [1].
Beispiel: relative Breiten mit Festlegungen für flex-shrink und flex-basis
nav, footer {
  flex: 1 1 auto;
}
main {
  flex: 2 1 auto;
}

[Bearbeiten] flex-grow

Mit der Eigenschaft flex-grow können Sie einem flexiblen Element einen Wachstumsfaktor zuordnen. Wenn Sie den Wert von flex-grow erhöhen, verbreitern Sie es entsprechend. Der Browser rechnet die Breiten der flexiblen Elemente entsprechend um.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • 0: (Standardwert) das Element verändert seine Breite nicht
  • Zahl: Das Element bekommt eine Breite relativ zu den anderen flexiblen Geschwisterelementen und in Abhängigkeit vom zur Verfügung stehenden Platz.
  • initial
  • inherit


Beispiel: Vergrößern mit flex-grow ansehen …
header, article, nav, aside, footer {
  flex-grow: 1;
}
 
article {
  flex-grow: 2;
}
 
aside {
  flex-grow: 3;
}
Beachten Sie: Genau genommen legt flex-grow nicht die anteilige Breite der Elemente fest, sondern teilt den noch verfügbaren Raum anteilig zwischen den vorhandenen Elementen auf.[2]
Empfehlung: Verwenden Sie anstelle von flex-grow die zusammenfassende Eigenschaft flex, da diese bei unspezifizierten Festlegungen Standardwerte für flex-shrink und flex-basis annimmt.
Authors are encouraged to control flexibility using the flex shorthand rather than flex-grow directly, as the shorthand correctly resets any unspecified components to accommodate common uses.[3]


[Bearbeiten] flex-shrink

Mit der Eigenschaft flex-shrink können Sie einem flexiblen Element einen Schrumpffaktor zuordnen. Wenn Sie den Wert von flex-shrink erhöhen, stauchen oder verschmälern Sie es entsprechend. Der Browser rechnet die Breiten der flexiblen Elemente entsprechend um.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Folgende Angabe ist nötig:

  • Zahl: ganze, positive Zahl, die den Schrumpffaktor anzeigt (Standardwert = 1)
Beispiel: Stauchen mit flex-shrink ansehen …
.flex-container {
  display: flex;
}
 
.flex1 { 
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 25em; 
}
 
.flex2 { 
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 25em;
}
Beide flexiblen Elemente versuchen die Basisbreite von 25em einzuhalten.

Wenn die verfügbare Breite größer wird (hier durch max-width von body beschränkt), wird der verfügbare Platz aufgeteilt. Dabei erhält das rechte Element durch den höheren Wert von flex-grow den doppelten Anteil an Zuwachs gegenüber dem linken Element.

Wenn die verfügbare Breite kleiner wird, schrumpfen die flexiblen Elemente. Dabei schrumpft das rechte Element durch den höheren Wert von flex-shrink doppelt so stark wie das linke Element.
Beachten Sie: Negative Werte sind nicht zulässig und werden ignoriert!

[Bearbeiten] flex-basis

Mit der Eigenschaft flex-basis können Sie einem flexiblen Element eine Basisbreite geben.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • feste Längenangabe: Ist die Flexbox breiter als die Summe der einzelnen Elemente, bleibt die überschüssige Fläche frei.
  • Wert in Prozent: Die Summe der Prozentwerte der einzelnen Elemente muss nicht 100% betragen, ist sie kleiner oder größer, wird sie passend umgerechnet.
  • auto: (Standardwert) Breite wird flexibel angepasst.
  • content: Breite orientiert sich am Elementinhalt.
  • inherit
Beispiel: Breiten mit flex-basis ansehen …
header, article, nav, aside, footer {
  flex-basis: 10%;
}
 
article {
  flex-basis: 20%;
}
 
aside {
  flex-basis: 30%;
}

Dies zeigt die große Anpassungsfähigkeit des Flexbox-Modells. Bestimmte Layout-Möglichkeiten könnten mit herkömmlichen Modellen, wie etwa floating oder einem Tabellenlayout nicht adäquat umgesetzt werden.

Beachten Sie: Der Internet Explorer hat in den Versionen 10 und 11 einen Bug, der box-sizing:border-box ignoriert.[4]
Auch ein Arbeiten mit calc() ist im IE10 und 11 nicht möglich.

[Bearbeiten] Quellen

  1. Philipp Walton: flexbugs
  2. css-tricks.com: `flex-grow` is weird. Or is it?
  3. W3C: the flex-grow property
  4. Philip Walton: flex-basis doesn't account for box-sizing:border-box

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML