Podział przestrzeni

9.1 Właściwość flex-grow

W Flexboxie mamy różne narzędzia do zarządzania rozdziałem przestrzeni między elementami wewnątrz kontenera Flex. Właściwości flex-grow, flex-shrink i flex-basis odgrywają kluczową rolę w kontrolowaniu rozmiaru i zachowania elementów Flex w różnych warunkach. Teraz omówimy szczegółowo każdą z tych właściwości i ich użycie.

Właściwość flex-grow określa zdolność elementu Flex do zwiększania rozmiaru w celu zajęcia dostępnej przestrzeni w kontenerze. Wartość flex-grow to współczynnik, wskazujący, o ile element może się powiększyć w porównaniu z innymi elementami Flex.

Wartości:

• Liczba całkowita lub wartość ułamkowa
• Domyślna wartość: 0 (element nie rośnie)

Przykład użycia:

    
      .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>
    
  

Wyjaśnienie kodu:

• .grow-1: te elementy mają wartość flex-grow: 1;, co pozwala im rosnąć równomiernie
• .grow-2: ten element ma wartość flex-grow: 2;, co pozwala mu rosnąć dwa razy bardziej w porównaniu z elementami z flex-grow: 1;

9.2 Właściwość flex-shrink

Właściwość flex-shrink określa zdolność elementu Flex do zmniejszania rozmiaru, jeśli przestrzeń w kontenerze jest ograniczona. Wartość flex-shrink to współczynnik, wskazujący, o ile element może się zmniejszyć w porównaniu z innymi elementami Flex.

Wartości:

• Liczba całkowita lub wartość ułamkowa
• Domyślna wartość: 1 (element może się zmniejszać)

Przykład użycia:

    
      .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>
    
  

Wyjaśnienie kodu:

• .shrink-0: ten element ma wartość flex-shrink: 0;, co nie pozwala mu się zmniejszać
• .shrink-1: te elementy mają wartość flex-shrink: 1;, co pozwala im się zmniejszać w razie potrzeby

9.3 Właściwość flex-basis

Właściwość flex-basis określa początkowy rozmiar elementu Flex przed podziałem wolnej przestrzeni. Może być wyrażona w różnych jednostkach miary, takich jak piksele, procenty i inne.

Wartości:

• Długość w różnych jednostkach (px, %, em itp.)
• Domyślna wartość: auto (rozmiar określony przez zawartość)

Przykład użycia:

    
      .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>
    
  

Wyjaśnienie kodu:

• .basis-auto: ten element ma wartość flex-basis: auto;, co oznacza, że jego rozmiar określa zawartość
• .basis-100px: ten element ma stały początkowy rozmiar 100 pikseli
• .basis-50percent: ten element ma początkowy rozmiar 50% szerokości kontenera

9.4 Użycie właściwości

Właściwość flex jest skróconym zapisem dla ustawiania flex-grow, flex-shrink i flex-basis. Pozwala na zarządzanie wszystkim trzema aspektami podziału przestrzeni w jednym atrybucie.

Składnia:

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

Przykład użycia:

    
      .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>
    
  

Wyjaśnienie kodu:

• .flex-1: ten element ma flex: 1 1 auto;, co oznacza, że może rosnąć i zmniejszać się równomiernie z innymi elementami, a jego początkowy rozmiar jest określony przez zawartość
• .flex-2: ten element ma flex: 2 1 100px;, co oznacza, że może rosnąć dwa razy bardziej w porównaniu z elementami z flex-grow: 1;, może się zmniejszać i ma początkowy rozmiar 100 pikseli
• .flex-3: ten element ma flex: 1 0 50%;, co oznacza, że może rosnąć, ale nie zmniejszać się, a jego początkowy rozmiar stanowi 50% szerokości kontenera