flex

Typ

block-Element (Formatierung)

Zulässige Kind-Elemente:

flexitem

Unterstütze Attribute

aligncontent (optional): Die Ausrichtung von flexitem-Elementen entlang der Querachse der Zeile, wenn durch Umbrechen zusätzlicher Platz in der Querachse vorhanden ist.
Default-Wert: stretch
alignitems (optional): Die Ausrichtung der flexitem-Elemente entlang der Querachse der Zeile.
Default-Wert: stretch
columngap (optional): Die Größe des Abstands zwischen den Spalten.
Default-Wert: 0
flexdirection (optional): Gibt die Richtung an, in der die flexitem-Elemente platziert werden.
Default-Wert: row
flexwrap (optional): Legt fest, ob die flexitem-Elemente in einer einzigen Zeile angeordnet oder gegebenenfalls auf mehrere Zeilen umgebrochen werden.
Default-Wert: nowrap
justifycontent (optional): Die Ausrichtung der flexitem-Elemente entlang der Hauptachse.
Default-Wert: stretch
name (optional): Bezeichner des Elements zur Identifizierung. Der Name muss innerhalb eines variant-Elements eindeutig sein.
Default-Wert: -
rowgap (optional): Die Größe des Abstands zwischen den Zeilen.
Default-Wert: 0
tags (optional): Liste von eigenen Bezeichnern, um z. B. besondere Stilvorgaben u.ä. implementieren zu können. Die Listenelemente werden durch Leerzeichen voneinander getrennt.
Default-Wert: -

Beschreibung

Ein flex Element dient zur Formatierung/Ausrichtung von Inhalten, die in flexitem-Elementen gruppiert sind. Es orientiert sich dabei an der gleichnamigen css-Eigenschaft, die z. B. unter CSS-Tricks gut erklärt ist.

Code-Beispiele

Code-Beispiel: Standard

<flex>
  <flexitem minwidth="40%" maxwidth="40%"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
</flex>

Code-Beispiel: aligncontent

<flex aligncontent="center" minheight="200px" flexwrap="wrap" >
  <flexitem minwidth="40%" maxwidth="40%"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
</flex>

Code-Beispiel: alignitems

<flex flexwrap="wrap" minheight="200px" alignitems="flexend">
  <flexitem minwidth="40%" maxwidth="40%"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
</flex>

Code-Beispiel: columngap

<flex columngap="75px">
  <flexitem minwidth="40%" maxwidth="40%"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
</flex>

Code-Beispiel: flexdirection

<flex flexdirection="column">
  <flexitem minwidth="40%" maxwidth="40%"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
</flex>

Code-Beispiel: wrap

<flex flexwrap="wrap">
  <flexitem minwidth="40%" maxwidth="40%"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
</flex>

Code-Beispiel: justifycontent

<flex justifycontent="center" flexwrap="wrap">
  <flexitem minwidth="40%" maxwidth="40%"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
</flex>

Code-Beispiel: rowgap

<flex flexwrap="wrap" rowgap="50px">
  <flexitem minwidth="40%" maxwidth="40%"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
</flex>