Ausrichtung an der Querachse

8.1 Eigenschaft align-items

Die Eigenschaften align-items und align-self erlauben es, Flex-Elemente entlang der Querachse auszurichten, was Flexibilität und Präzision im Layout bietet.

Die Eigenschaft align-items steuert die Ausrichtung der Flex-Elemente entlang der Querachse (senkrecht zur Hauptachse) innerhalb eines Flex-Containers. Die Querachse hängt vom Wert der Eigenschaft flex-direction ab:

• Wenn flex-direction den Wert row oder row-reverse hat, ist die Querachse vertikal
• Wenn flex-direction den Wert column oder column-reverse hat, ist die Querachse horizontal

Werte:

• stretch: Elemente dehnen sich aus, um den Container zu füllen (Standardwert)
• flex-start: Elemente werden am Anfang des Containers ausgerichtet
• flex-end: Elemente werden am Ende des Containers ausgerichtet
• center: Elemente werden in der Mitte des Containers ausgerichtet
• baseline: Elemente werden an der Basislinie des Textes ausgerichtet

Anwendungsbeispiel:

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .align-stretch {
        align-items: stretch;
      }

      .align-flex-start {
        align-items: flex-start;
      }
    
  

    
      <div class="container align-stretch">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

      <div class="container align-flex-start">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>
    
  

8.2 Eigenschaft align-self

Die Eigenschaft align-self ermöglicht es, den Wert von align-items für ein spezifisches Flex-Element zu überschreiben. Diese Eigenschaft wird direkt auf das Flex-Element angewendet und steuert seine Ausrichtung entlang der Querachse innerhalb des Flex-Containers.

Werte:

• auto: Der Wert wird vom übergeordneten Element geerbt (Standard)
• stretch: Das Element dehnt sich aus, um den Container zu füllen
• flex-start: Das Element wird am Anfang des Containers ausgerichtet
• flex-end: Das Element wird am Ende des Containers ausgerichtet
• center: Das Element wird in der Mitte des Containers ausgerichtet
• baseline: Das Element wird an der Basislinie des Textes ausgerichtet

Anwendungsbeispiel:

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
        align-items: flex-start;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .self-flex-end {
        align-self: flex-end;
      }

      .self-center {
        align-self: center;
      }

      .self-baseline {
        align-self: baseline;
      }
    
  

    
      <div class="container">
        <div class="item self-flex-end">Element 3</div>
        <div class="item self-center">Element 4</div>
        <div class="item self-baseline">Element 5</div>
      </div>
    
  

Code-Erklärung:

• .self-flex-end: dieses Element wird am unteren Rand des Containers ausgerichtet
• .self-center: dieses Element wird vertikal zentriert
• .self-baseline: dieses Element wird an der Basislinie des Textes ausgerichtet

8.3 Zentrieren von Elementen

Mit Flexbox ist es einfach, Elemente sowohl vertikal als auch horizontal zu zentrieren, indem man eine Kombination aus justify-content und align-items oder align-self verwendet.

Anwendungsbeispiel:

    
      .center-container {
        display: flex;
        justify-content: center; /* horizontale Zentrierung */
        align-items: center; /* vertikale Zentrierung */
        height: 300px;
        border: 2px solid #000;
      }

      .center-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
      }
    
  

    
      <div class="center-container">
        <div class="center-item">Zentriertes Element</div>
      </div>
    
  

Code-Erklärung:

• .center-container: Flex-Container, in dem die Elemente horizontal mit justify-content: center; und vertikal mit align-items: center; zentriert sind
• .center-item: Flex-Element, das im Container zentriert ist