Lektionen
Start
Jetzt lernen
CodeGym /Java Kurs /Frontend SELF DE /Richtung der Achsen

Richtung der Achsen

Frontend SELF DE
Level 17 , Lektion 2
Verfügbar

6.1 Eigenschaft flex-direction

Flexbox bietet flexible und leistungsstarke Werkzeuge zur Erstellung von responsiven Layouts. Ein wichtiger Teil dieses Systems sind die Layout-Achsen, die bestimmen, wie Flex-Elemente innerhalb eines Flex-Containers angeordnet werden. Unten werden wir die Eigenschaften flex-direction und flex-wrap detailliert betrachten, die die Richtung der Achsen und das Verhalten von Flex-Elementen bei Überfüllung steuern.

Die Eigenschaft flex-direction bestimmt die Richtung der Hauptachse, entlang der die Flex-Elemente angeordnet werden. Diese Richtung kann horizontal oder vertikal sowie vorwärts oder rückwärts sein.

Werte:

  • row: Die Hauptachse verläuft horizontal von links nach rechts (Standardwert)
  • row-reverse: Die Hauptachse verläuft horizontal von rechts nach links
  • column: Die Hauptachse verläuft vertikal von oben nach unten
  • column-reverse: Die Hauptachse verläuft vertikal von unten nach oben

Beispiel der Verwendung

1. Elemente sind horizontal angeordnet:

CSS
    
      .container-row {
        display: flex;
        flex-direction: row;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-row-reverse {
        display: flex;
        flex-direction: row-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
Java university
HTML
    
      <div class="container-row">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

2. Elemente sind vertikal angeordnet:

CSS
    
      .container-column {
        display: flex;
        flex-direction: column;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-column-reverse {
        display: flex;
        flex-direction: column-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML
    
      <div class="container-column">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

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

Code Erklärung:

  • .container-row: Elemente sind horizontal von links nach rechts angeordnet
  • .container-row-reverse: Elemente sind horizontal von rechts nach links angeordnet
  • .container-column: Elemente sind vertikal von oben nach unten angeordnet
  • .container-column-reverse: Elemente sind vertikal von unten nach oben angeordnet

6.2 Eigenschaft flex-wrap

Die Eigenschaft flex-wrap bestimmt, ob Flex-Elemente in eine neue Zeile/Spalte umgebrochen werden, wenn sie nicht in eine Reihe passen. Dies ist besonders nützlich, um responsive Layouts zu erstellen, bei denen die Größe des Containers abhängig vom Gerät oder Bildschirm variiert.

Werte

  • nowrap: Elemente brechen nicht um und werden in einer Zeile/Spalte angezeigt (Standardwert)
  • wrap: Elemente brechen bei Bedarf in eine neue Zeile/Spalte um
  • wrap-reverse: Elemente brechen in umgekehrter Reihenfolge in eine neue Zeile/Spalte um

Verwendungsbeispiele

Wert nowrap:

Elemente brechen nicht um und werden in einer Zeile/Spalte angezeigt (Standardwert).

CSS
    
      .container-nowrap {
        display: flex;
        flex-wrap: nowrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML
    
      <div class="container-nowrap">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
      </div>

Wert wrap:

Elemente brechen bei Bedarf in eine neue Zeile/Spalte um.

CSS
    
      .container-wrap {
        display: flex;
        flex-wrap: wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML
    
      <div class="container-wrap">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
      </div>

Wert wrap-reverse:

Elemente brechen in umgekehrter Reihenfolge in eine neue Zeile/Spalte um.

CSS
    
      .container-wrap-reverse {
        display: flex;
        flex-wrap: wrap-reverse;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML
    
      <div class="container-wrap-reverse">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
      </div>

Code Erklärung:

  • .container-nowrap: Flex-Elemente sind in einer Zeile angeordnet, auch wenn sie über die Containergrenze hinausgehen
  • .container-wrap: Flex-Elemente brechen in eine neue Zeile um bei Bedarf
  • .container-wrap-reverse: Flex-Elemente brechen in umgekehrter Reihenfolge in eine neue Zeile um

6.3 Verwendung von flex-direction und flex-wrap

Die Eigenschaften flex-direction und flex-wrap können mit der Kurzform flex-flow kombiniert werden. Diese Eigenschaft ermöglicht es, die Achsrichtung und den Umbruch von Elementen gleichzeitig zu setzen.

Syntax:

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

Beispiel der Verwendung:

CSS
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
        <div class="item">Element 5</div>
      </div>

Code Erklärung:

  • .container: Flex-Container mit kombinierter Verwendung von flex-direction: row; und flex-wrap: wrap;, was bedeutet, dass die Elemente horizontal angeordnet und bei Bedarf in eine neue Zeile umgebrochen werden.
Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION