Kurs HTML

Problem przepełnienia kontenera

Domyślnie, gdy używamy display: flex, wszystkie elementy flex próbują zmieścić się w **jednej linii** wzdłuż osi głównej. Jeśli suma ich rozmiarów (main size) przekracza dostępną przestrzeń w kontenerze, elementy te zaczną się kurczyć (jeśli flex-shrink na to pozwala) lub po prostu "wyleją się" poza kontener.

Właściwość flex-wrap, stosowana do **kontenera flex**, pozwala kontrolować, czy elementy flex mają pozostać w jednej linii, czy też mogą być zawijane do kolejnych linii, gdy zabraknie miejsca.

Możliwe wartości flex-wrap

Właściwość flex-wrap może przyjmować trzy wartości:

1. nowrap (wartość domyślna):

   • Elementy flex **nie są zawijane**.
   • Wszystkie elementy próbują zmieścić się w jednej linii.
   • Jeśli się nie mieszczą, mogą się kurczyć (jeśli flex-shrink > 0) lub przepełnić kontener.

   .container {
     display: flex;
     flex-wrap: nowrap; /* Domyślne, można pominąć */
     width: 300px; /* Ograniczona szerokość kontenera */
     border: 1px solid blue;
   }
   .item {
     width: 100px; /* Każdy element chce mieć 100px */
     height: 50px;
     background-color: lightblue;
     border: 1px solid navy;
     margin: 5px;
   }
   

   <!-- 3 elementy po 100px + marginesy > 300px -->
   <!-- Elementy będą próbowały się zmieścić, kurcząc się lub wylewając -->
   <div class="container">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>

2. wrap:

   • Elementy flex **są zawijane** do nowych linii, jeśli nie mieszczą się w bieżącej linii.
   • Nowe linie są dodawane poniżej poprzednich (przy flex-direction: row) lub po prawej stronie (przy flex-direction: column).
   • Kierunek dodawania nowych linii zależy od flex-direction.

   .container {
     display: flex;
     flex-wrap: wrap; /* Włącz zawijanie */
     width: 300px;
     border: 1px solid green;
   }
   /* Style .item jak poprzednio */
   

   <!-- Element 3 nie zmieści się w pierwszej linii i zostanie zawinięty -->
   <div class="container" style="background-color: #e0ffe0;">
     <div class="item" style="background-color: lightgreen; border-color: darkgreen;">1</div>
     <div class="item" style="background-color: lightgreen; border-color: darkgreen;">2</div>
     <div class="item" style="background-color: lightgreen; border-color: darkgreen;">3</div>
   </div>
   <!-- Efekt: -->
   <!-- [1] [2] -->
   <!-- [3]     -->

3. wrap-reverse:

   • Elementy flex **są zawijane**, ale nowe linie są dodawane w **odwrotnym kierunku** osi poprzecznej.
   • Przy flex-direction: row, nowe linie pojawiają się **powyżej** poprzednich.
   • Przy flex-direction: column, nowe linie pojawiają się po **lewej** stronie poprzednich.

   .container {
     display: flex;
     flex-wrap: wrap-reverse; /* Włącz odwrotne zawijanie */
     width: 300px;
     border: 1px solid orange;
   }
   /* Style .item jak poprzednio */
   

   <!-- Element 3 nie zmieści się w linii i zostanie zawinięty POWYŻEJ -->
   <div class="container" style="background-color: #fff0e0;">
     <div class="item" style="background-color: lightsalmon; border-color: darkorange;">1</div>
     <div class="item" style="background-color: lightsalmon; border-color: darkorange;">2</div>
     <div class="item" style="background-color: lightsalmon; border-color: darkorange;">3</div>
   </div>
   <!-- Efekt: -->
   <!-- [3]     -->
   <!-- [1] [2] -->

Wieloliniowe kontenery Flex

Gdy używamy wrap lub wrap-reverse, kontener flex staje się **wieloliniowy**. W takim przypadku pojawia się możliwość kontrolowania wyrównania i rozkładu przestrzeni **między liniami flex** za pomocą właściwości align-content (omówionej w dalszej części kursu).

Właściwość align-items nadal kontroluje wyrównanie elementów **wewnątrz pojedynczej linii flex**.