Grundlagen Flexbox

5.1 Grundkonzepte von Flexbox

Flexbox (Flexible Box Layout) ist ein mächtiges CSS-Layout-System, das flexible und effiziente Möglichkeiten zur Verteilung von Raum und Ausrichtung von Elementen innerhalb eines Containers bietet. Flexbox ist besonders nützlich für die Erstellung komplexer Layouts und adaptives Design. Jetzt schauen wir uns die Grundlagen von Flexbox an, einschließlich der Erstellung von Flex-Containern und -Elementen sowie die Verwendung der Eigenschaft display: flex;.

Grundkonzepte von Flexbox

Flexbox besteht aus zwei Schlüsselkomponenten:

• Flex-Container: das Elternelement, das Flex-Elemente enthält.
• Flex-Elemente: die Kind-Elemente innerhalb eines Flex-Containers, die gemäß den Flexbox-Regeln ausgerichtet und verteilt werden.

Flex-Container

Ein Flex-Container wird mit der Eigenschaft display: flex; oder display: inline-flex; erstellt. Der Flex-Container steuert die Anordnung seiner Kindelemente (Flex-Elemente) und bietet viele Möglichkeiten für deren Ausrichtung und Verteilung.

    
      .container {
        display: flex; /* oder inline-flex */
      }
    
  

Beispielverwendung:

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

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

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

Erklärung des Codes:

• .container: Flex-Container, erstellt mit display: flex;. Innerhalb dieses Containers werden Elemente gemäß den Flexbox-Regeln ausgerichtet und verteilt.
• .item: Flex-Elemente, die Kindelemente des Flex-Containers sind

5.2 Eigenschaften des Flex-Containers

Die Eigenschaft display: flex; definiert ein Element als Flex-Container. Die Kindelemente dieses Containers werden automatisch zu Flex-Elementen und folgen den Flexbox-Regeln.

display: flex;

Erstellt einen blockverschiebenden Flex-Container. Der Flex-Container verhält sich wie ein Blockelement und nimmt die gesamte verfügbare Breite des Elternelements ein.

    
      .container {
        display: flex;
      }
    
  

display: inline-flex;

Erstellt einen zeilenverschiebenden Flex-Container. Der Flex-Container verhält sich wie ein Inline-Element, nimmt nur die notwendige Breite ein, und kann neben anderen Inline-Elementen platziert werden.

    
      .inline-container {
        display: inline-flex;
      }
    
  

Beispielverwendung:

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

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

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

      <div class="inline-container">
        <div class="item">Element 4</div>
        <div class="item">Element 5</div>
      </div>
    
  

Erklärung des Codes:

• inline-container — ist ein Flex-Container, erstellt mit display: inline-flex; Innerhalb dieses Containers werden Elemente gemäß den Flexbox-Regeln ausgerichtet und verteilt. Die Container verhalten sich wie Inline-Elemente und werden nebeneinander platziert.

5.3 Eigenschaften der Flex-Elemente

1. Die Eigenschaft flex ist eine verkürzte Schreibweise für die Angabe von flex-grow, flex-shrink und flex-basis. Sie ermöglicht die Steuerung, wie sich Flex-Elemente ausdehnen und zusammenziehen, um den verfügbaren Raum zu füllen.

Syntax:

    
      .element {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

Beispielverwendung:

    
      .item {
        flex: 1;
      }
    
  

2. Eigenschaft order

Die Eigenschaft order bestimmt die Reihenfolge, in der Flex-Elemente innerhalb eines Flex-Containers angeordnet sind. Standardmäßig haben alle Elemente den Wert order: 0;.

Werte

Ganze Zahlen. Elemente mit einem kleineren Wert werden vor Elementen mit einem größeren Wert angeordnet.

Syntax:

    
      .element {
        order: value;
      }
    
  

Beispielverwendung:

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

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

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

Erklärung des Codes:

• .item-1: hat den Wert order: 2, daher wird es nach dem Element mit order: 1 angeordnet
• .item-2: hat den Wert order: 1, daher wird es als erstes angeordnet
• .item-3: hat den Wert order: 3, daher wird es als letztes angeordnet