Skip to content

flexitem

Typ

block-Element (Formatierung)

Zulässige Kind-Elemente:

Unterstütze Attribute

  • alignself (optional): Dadurch kann die Standardausrichtung für einzelne Elemente überschrieben werden.
    Default-Wert: auto

  • flexbasis (optional): Definiert Grundgröße des flexitem-Elements.
    Default-Wert: auto

  • flexgrow (optional): Definiert die Fähigkeit eines flexitem-Elements, bei Bedarf zu wachsen.
    Default-Wert: 0

  • flexshrink (optional):Definiert die Fähigkeit eines flexitem-Elements, bei Bedarf zu schrumpfen.
    Default-Wert: 1

  • maxwidth (optional): Maximale Breite des flexitem-Elements.
    Default-Wert: none

  • minwidth (optional): Minimale Breite des flexitem-Elements.
    Default-Wert: auto

  • name (optional): Bezeichner des Elements zur Identifizierung. Der Name muss innerhalb eines variant-Elements eindeutig sein.
    Default-Wert: -

  • order (optional): Definiert die Rangfolge des Elements.
    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: -

weitere Informationen zur Syntax

Beschreibung

Ein flexitem-Element dient zur Formatierung/Ausrichtung und Gruppierung von Inhalten innerhalb eines flex-Elements. 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>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></flexitem>
</flex>
Code-Beispiel: min-/maxwidth
<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>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></flexitem>
</flex>
Code-Beispiel: alignself
<flex flexwrap="wrap" minheight="200px" >
  <flexitem minwidth="40%" maxwidth="40%"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%" alignself="end"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></flexitem>
</flex>
Code-Beispiel: flexbasis
<flex>
  <flexitem minwidth="40%" maxwidth="40%"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></flexitem>
  <flexitem flexbasis="40%"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%"><p>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></flexitem>
</flex>
Code-Beispiel: order
<flex>
  <flexitem minwidth="40%" maxwidth="40%" order="3"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%" order="1"><p>At vero eos et accusam et justo duo dolores et ea rebum.</p></flexitem>
  <flexitem minwidth="40%" maxwidth="40%" order="2"><p>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></flexitem>
</flex>