CSS/Eigenschaften/Flexbox

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Flexbox ist eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen. Dabei kann nicht nur die Größendarstellung, sondern auch die Reihenfolge der Elemente unabhängig vom HTML-Code durch CSS festgelegt werden.

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

Details: caniuse.com

Hinweis

Die Spezifikationen zu Flexbox wurden mehrfach geändert. Wenn Sie im Internet Code-Beispiele mit der Eigenschaft
  • display: box; oder
  • display: flexbox; finden, dann ist dieser Code veraltet.

Code nach der neuen, gültigen Spezifikation kann man durch:

  • display: flex; und flex-{*} erkennen.

Das Ungewöhnlichste bzw. Gewöhnungsbedürftigste an Flexbox ist der Verzicht auf Breiten bzw. Mindestbreiten.

Das Flexbox-Modell unterscheidet zwischen dem Elternelement Flex-Container und den darin enthaltenen Flex-Items. Die Flex-Container werden durch flex oder inline-flex definiert und können eine Breite, bzw. Mindest- oder Maximalbreite haben.

Im Flex-Container sind die Flex-Items. Diese Kind-Elemente (und nur die, nicht aber die Kindeskinder) benötigen keine Breitenangaben mehr, da sie ja flexibel sind. Margins sind möglich, können aber mittels justify-content ergänzt/ ersetzt werden.

Die einzelnen Kindelemente der Flexbox können durch folgende Eigenschaften verändert werden.

  • entlang der zwei Achsen: Hauptachsen und Querachsen



Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

Artikel

Demos

Generatoren