Kurs HTML

Wprowadzenie: Skrócony zapis elastyczności

Właściwości flex-grow, flex-shrink i flex-basis definiują kluczowe aspekty elastyczności elementu flex. Często ustawia się je razem, aby określić, jak element ma się zachowywać pod względem rozmiaru i reagowania na dostępną przestrzeń.

Właściwość flex jest **skróconym zapisem (shorthand)**, który pozwala ustawić te trzy właściwości jednocześnie w jednej deklaracji. Stosuje się ją bezpośrednio do **elementu flex**.

Jest to jedna z najważniejszych i najczęściej używanych właściwości w Flexboxie.

Składnia flex

Właściwość flex może przyjmować od jednej do trzech wartości:

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Interpretacja wartości:

• Jedna wartość:
  • Jeśli jest to liczba bez jednostki (np. flex: 1;), jest interpretowana jako <flex-grow>. Wtedy flex-shrink przyjmuje wartość 1, a flex-basis 0%. Czyli flex: 1; to skrót dla flex: 1 1 0%;.
  • Jeśli jest to poprawna wartość dla width/height (np. flex: 150px;, flex: 30%;, flex: auto;, flex: content;), jest interpretowana jako <flex-basis>. Wtedy flex-grow i flex-shrink przyjmują wartość 1. Czyli flex: 150px; to skrót dla flex: 1 1 150px;.
  • Jeśli jest to słowo kluczowe none, oznacza to flex: 0 0 auto; (element nie rośnie, nie kurczy się, rozmiar bazowy zależy od width/height/zawartości).
  • Jeśli jest to słowo kluczowe auto, oznacza to flex: 1 1 auto; (element może rosnąć i kurczyć się, rozmiar bazowy zależy od width/height/zawartości).
• Dwie wartości:
  • Pierwsza wartość musi być liczbą bez jednostki i jest interpretowana jako <flex-grow>.
  • Druga wartość:
    • Jeśli jest liczbą bez jednostki (np. flex: 1 0;), jest interpretowana jako <flex-shrink>. Wtedy flex-basis przyjmuje wartość 0%. Czyli flex: 1 0; to skrót dla flex: 1 0 0%;.
    • Jeśli jest poprawną wartością dla width/height (np. flex: 2 150px;), jest interpretowana jako <flex-basis>. Wtedy flex-shrink przyjmuje wartość 1. Czyli flex: 2 150px; to skrót dla flex: 2 1 150px;.
• Trzy wartości:
  • Pierwsza wartość musi być liczbą bez jednostki (<flex-grow>).
  • Druga wartość musi być liczbą bez jednostki (<flex-shrink>).
  • Trzecia wartość musi być poprawną wartością dla width/height (<flex-basis>).
  • Przykład: flex: 2 0 100px; (rośnij z wagą 2, nie kurcz się, rozmiar bazowy 100px).

Wartość domyślna: flex: 0 1 auto; (nie rośnij, kurcz się z wagą 1, rozmiar bazowy z width/height/zawartości).

Typowe wartości skrócone i ich znaczenie

• flex: 0 auto; lub flex: initial; (odpowiednik flex: 0 1 auto; - domyślne zachowanie): Element nie rośnie, może się kurczyć, rozmiar bazowy zależy od width/height/zawartości.
• flex: auto; (odpowiednik flex: 1 1 auto;): Element może rosnąć i kurczyć się, rozmiar bazowy zależy od width/height/zawartości. Rozdziela wolną przestrzeń proporcjonalnie do rozmiaru bazowego.
• flex: none; (odpowiednik flex: 0 0 auto;): Element jest całkowicie nielastyczny - nie rośnie, nie kurczy się. Jego rozmiar zależy od width/height/zawartości.
• flex: <liczba>; (np. flex: 1;, flex: 2;) (odpowiednik flex: <liczba> 1 0%;): Element może rosnąć i kurczyć się, ale jego rozmiar bazowy to 0%. Oznacza to, że cała przestrzeń w kontenerze jest traktowana jako wolna i rozdzielana proporcjonalnie do wartości flex-grow. Jest to bardzo częsty sposób na tworzenie kolumn o równych lub proporcjonalnych szerokościach.

Przykład użycia flex: 1; do stworzenia równych kolumn:

<div class="container" style="display: flex;">
  <div class="column">Kolumna 1</div>
  <div class="column">Kolumna 2</div>
  <div class="column">Kolumna 3</div>
</div>

.column {
  flex: 1; /* Odpowiednik flex: 1 1 0%; */
  border: 1px solid gray;
  padding: 10px;
  margin: 5px;
}

Ponieważ wszystkie kolumny mają flex-basis: 0% i flex-grow: 1, cała szerokość kontenera zostanie równo podzielona między nimi (po odjęciu marginesów i paddingów).