Raumverteilung

9.1 Eigenschaft flex-grow

Im Flexbox gibt es verschiedene Tools zur Verwaltung der Raumverteilung zwischen Elementen innerhalb eines Flex-Containers. Die Eigenschaften flex-grow, flex-shrink und flex-basis spielen eine Schlüsselrolle bei der Kontrolle der Größe und des Verhaltens von Flex-Elementen unter verschiedenen Bedingungen. Jetzt betrachten wir jedes dieser Eigenschaften und deren Verwendung im Detail.

Die Eigenschaft flex-grow definiert die Fähigkeit eines Flex-Elements, in der Größe zuzunehmen, um den verfügbaren Platz im Container einzunehmen. Der Wert von flex-grow stellt einen Koeffizienten dar, der angibt, wie sehr das Element im Vergleich zu anderen Flex-Elementen wachsen kann.

Werte:

• Ganze Zahl oder Bruchwert
• Standardwert: 0 (Element wächst nicht)

Beispielverwendung:

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

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

      .grow-1 {
        flex-grow: 1;
      }

      .grow-2 {
        flex-grow: 2;
      }
    
  

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

Code-Erklärung:

• .grow-1: diese Elemente haben den Wert flex-grow: 1;, was ihnen erlaubt, gleichmäßig zu wachsen
• .grow-2: dieses Element hat den Wert flex-grow: 2;, was ihm erlaubt, doppelt so viel zu wachsen im Vergleich zu Elementen mit flex-grow: 1;

9.2 Eigenschaft flex-shrink

Die Eigenschaft flex-shrink definiert die Fähigkeit eines Flex-Elements, in der Größe zu schrumpfen, wenn der Platz im Container begrenzt ist. Der Wert von flex-shrink stellt einen Koeffizienten dar, der angibt, wie sehr das Element im Vergleich zu anderen Flex-Elementen schrumpfen kann.

Werte:

• Ganze Zahl oder Bruchwert
• Standardwert: 1 (Element kann schrumpfen)

Beispielverwendung:

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

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

      .shrink-0 {
        flex-shrink: 0;
      }

      .shrink-1 {
        flex-shrink: 1;
      }
    
  

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

Code-Erklärung:

• .shrink-0: dieses Element hat den Wert flex-shrink: 0;, was ihm nicht erlaubt zu schrumpfen
• .shrink-1: diese Elemente haben den Wert flex-shrink: 1;, was ihnen erlaubt zu schrumpfen, wenn nötig

9.3 Eigenschaft flex-basis

Die Eigenschaft flex-basis definiert die Ausgangsgröße eines Flex-Elements vor der Verteilung des freien Raums. Sie kann in verschiedenen Maßeinheiten wie Pixel, Prozent und andere angegeben werden.

Werte:

• Länge in verschiedenen Einheiten (px, %, em usw.)
• Standardwert: auto (Größe wird durch den Inhalt bestimmt)

Beispielverwendung:

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

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

      .basis-auto {
        flex-basis: auto;
      }

      .basis-100px {
        flex-basis: 100px;
      }

      .basis-50percent {
        flex-basis: 50%;
      }
    
  

    
      <div class="container">
        <div class="item basis-auto">Element 1</div>
        <div class="item basis-100px">Element 2</div>
        <div class="item basis-50percent">Element 3</div>
      </div>
    
  

Code-Erklärung:

• .basis-auto: dieses Element hat den Wert flex-basis: auto;, was bedeutet, dass seine Größe durch den Inhalt bestimmt wird
• .basis-100px: dieses Element hat eine feste Ausgangsgröße von 100 Pixel
• .basis-50percent: dieses Element hat eine Ausgangsgröße von 50% der Breite des Containers

9.4 Verwendung der Eigenschaften

Die Eigenschaft flex ist eine Kurzform zur Festlegung von flex-grow, flex-shrink und flex-basis. Sie ermöglicht die Verwaltung aller drei Aspekte der Raumverteilung in einer Eigenschaft.

Syntax:

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

Beispielverwendung:

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

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

      .flex-1 {
        flex: 1 1 auto;
      }

      .flex-2 {
        flex: 2 1 100px;
      }

      .flex-3 {
        flex: 1 0 50%;
      }
    
  

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

Code-Erklärung:

• .flex-1: dieses Element hat flex: 1 1 auto;, was bedeutet, dass es gleichmäßig mit anderen Elementen wachsen und schrumpfen kann und seine Ausgangsgröße durch den Inhalt bestimmt wird
• .flex-2: dieses Element hat flex: 2 1 100px;, was bedeutet, dass es doppelt so viel wachsen kann im Vergleich zu Elementen mit flex-grow: 1;, schrumpfen kann und eine Ausgangsgröße von 100 Pixel hat
• .flex-3: dieses Element hat flex: 1 0 50%;, was bedeutet, dass es wachsen, aber nicht schrumpfen kann, und seine Ausgangsgröße 50% der Breite des Containers beträgt