Looking for css Keywords? Try Ask4Keywords

CSSFlexibles Boxenlayout (Flexbox)


Einführung

Das Flexible Box-Modul oder kurz „Flexbox“ ist ein für Benutzeroberflächen entwickeltes Boxmodell. Mit diesem können Benutzer den Platz zwischen Elementen in einem Container so ausrichten und verteilen, dass sich Elemente vorhersehbar verhalten, wenn das Seitenlayout unterschiedliche, unbekannte Elemente berücksichtigen muss Bildschirmgrößen. Ein Flex-Container erweitert Elemente, um den verfügbaren Platz zu füllen, und verkleinert sie, um ein Überlaufen zu verhindern.

Syntax

  • Anzeige: Flex;
  • Flex-Richtung: Reihe | Zeilenumkehrung | Spalte | Spaltenumkehrung;
  • Flex-Wrap: Nowrap | wickeln | Wrap-Reverse;
  • Flex-Flow: <'Flex-Richtung'> || <'flex-wrap'>
  • Inhalt rechtfertigen: Flex-Start | Flex-Ende | Zentrum | Leerzeichen | Raum um;
  • Ausrichtungsartikel: Flex-Start | Flex-Ende | Zentrum | Grundlinie | strecken;
  • Inhalt ausrichten: Flex-Start | Flex-Ende | Zentrum | Leerzeichen | Raum um | strecken;
  • Reihenfolge: <Ganzzahl>;
  • Flex-Grow: <Nummer>; / * default 0 * /
  • Flex-Shrink: <Nummer>; / * default 1 * /
  • Flex-Basis: <Länge> | Auto; / * default auto * /
  • flex: keine | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
  • align-self: auto | Flex-Start | Flex-Ende | Zentrum | Grundlinie | strecken;

Bemerkungen

Vender-Präfixe

  • Anzeige: -webkit-box; / * Chrome <20 * /
  • Anzeige: -webkit-flex; / * Chrome 20+ * /
  • Anzeige: -Moz-Box; /* Feuerfuchs */
  • Anzeige: -ms-flexbox; / * IE * /
  • Anzeige: Flex; / * Moderne Browser * /

Ressourcen

Flexibles Boxenlayout (Flexbox) Verwandte Beispiele