Ausrichtung entlang der Hauptachse

7.1 Das justify-content Property

Flexbox bietet tolle Werkzeuge, um die Ausrichtung und Verteilung von Platz zwischen Elementen innerhalb eines Flex-Containers zu steuern. Eines der wichtigsten Eigenschaften dafür ist justify-content, das die Ausrichtung der Flex-Elemente entlang der Hauptachse kontrolliert.

Das justify-content Property bestimmt, wie Flex-Elemente entlang der Hauptachse des Flex-Containers verteilt werden. Die Hauptachse hängt vom Wert des flex-direction: ab.

• Wenn flex-direction den Wert row oder row-reverse hat, wird die Hauptachse horizontal sein.
• Wenn flex-direction den Wert column oder column-reverse hat, wird die Hauptachse vertikal sein.

Werte:

• flex-start: Elemente werden am Anfang des Containers ausgerichtet (Standardwert)
• flex-end: Elemente werden am Ende des Containers ausgerichtet
• center: Elemente werden in der Mitte des Containers zentriert
• space-between: Elemente werden gleichmäßig mit gleichen Abständen dazwischen verteilt
• space-around: Elemente werden gleichmäßig verteilt mit Abständen an den Rändern und dazwischen
• space-evenly: Elemente werden gleichmäßig mit gleichen Abständen zwischen ihnen und an den Rändern des Containers verteilt

Beispiel für die Verwendung:

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

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

      .flex-start {
        justify-content: flex-start;
      }
    
  

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

7.2 Werte von justify-content

1. flex-start

Bei dem Wert flex-start werden die Elemente am Anfang des Flex-Containers ausgerichtet, also auf der linken Seite, wenn die Hauptachse horizontal ist (row), oder auf der oberen Seite, wenn die Hauptachse vertikal ist (column).

Beispiel für die Verwendung:

    
      .container {
        display: flex;
        justify-content: flex-start;
      }
    
  

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

2. flex-end

Bei dem Wert flex-end werden die Elemente am Ende des Flex-Containers ausgerichtet, also auf der rechten Seite, wenn die Hauptachse horizontal ist (row), oder auf der unteren Seite, wenn die Hauptachse vertikal ist (column).

Beispiel für die Verwendung:

    
      .container {
        display: flex;
        justify-content: flex-end;
      }
    
  

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

3. center

Bei dem Wert center werden die Elemente in der Mitte des Flex-Containers zentriert. Dieser Wert ist nützlich für die Erstellung zentrierter Layouts.

Beispiel für die Verwendung:

    
      .container {
        display: flex;
        justify-content: center;
      }
    
  

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

4. space-between

Bei dem Wert space-between werden die Elemente gleichmäßig entlang der Hauptachse mit gleichen Abständen dazwischen verteilt. Das erste Element wird am Anfang des Containers ausgerichtet und das letzte Element am Ende des Containers.

Beispiel für die Verwendung:

    
      .container {
        display: flex;
        justify-content: space-between;
      }
    
  

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

5. space-around

Bei dem Wert space-around werden die Elemente gleichmäßig mit Abständen an den Rändern und dazwischen verteilt. Die Abstände zwischen den Elementen sind doppelt so groß wie die Abstände an den Rändern des Containers.

Beispiel für die Verwendung:

    
      .container {
        display: flex;
        justify-content: space-around;
      }
    
  

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

6. space-evenly

Bei dem Wert space-evenly werden die Elemente gleichmäßig mit gleichen Abständen zwischen ihnen und an den Rändern des Containers verteilt. Dieser Wert sorgt für gleiche Abstände im gesamten Container.

Beispiel für die Verwendung:

    
      .container {
        display: flex;
        justify-content: space-evenly;
      }
    
  

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

7.3 Menüzentrierung

Beispiel der Verwendung in echten Projekten – Zentrierung des Navigationsmenüs:

    
      .nav {
        display: flex;
        justify-content: center;
        background-color: #333;
        padding: 10px;
      }

      .nav-item {
        color: white;
        padding: 10px 20px;
        text-decoration: none;
      }

      .nav-item:hover {
        background-color: #575757;
      }
    
  

    
      <nav class="nav">
        <a href="#" class="nav-item">Startseite</a>
        <a href="#" class="nav-item">Über uns</a>
        <a href="#" class="nav-item">Dienstleistungen</a>
        <a href="#" class="nav-item">Kontakt</a>
      </nav>
    
  

Code-Erklärung:

• .nav: Flex-Container für das Navigationsmenü mit zentrierter Ausrichtung der Elemente
• .nav-item: Flex-Elemente (Links) mit Basisstilen

1

Aufgabe

Frontend SELF DE, Level 17, Lektion 3

Gesperrt

Verwendung von flex-start

Verwendung von flex-start

Öffnen

1

Aufgabe

Frontend SELF DE, Level 17, Lektion 3

Gesperrt

Verwendung von flex-end und center

Verwendung von flex-end und center

Öffnen