Zaawansowany Flexbox: Kontrola Elementów
Większość kursów kończy się na `justify-content` i `align-items`. Jednak prawdziwa moc Flexboxa leży w kontrolowaniu tego, jak poszczególne elementy (dzieci) zachowują się względem siebie.
1. Poza display: flex
Gdy nadajemy kontenerowi `display: flex`, jego dzieci stają się "flex items". Domyślnie ustawiają się w rzędzie i nie zawijają. Ale co, jeśli chcemy, aby jeden element był szerszy od innych?
2. Flex Grow: Wypełnianie miejsca
Właściwość flex-grow określa, jak bardzo element powinien "urosnąć", aby wypełnić dostępne puste miejsce w kontenerze. Domyślna wartość to 0.
.sidebar {
flex-grow: 1; /* Zajmie 1 część wolnego miejsca */
}
.content {
flex-grow: 3; /* Zajmie 3 razy więcej wolnego miejsca niż sidebar */
}
3. Flex Shrink: Kurczenie się
Właściwość flex-shrink to przeciwieństwo grow. Określa, jak szybko element ma się kurczyć, gdy brakuje miejsca (np. na telefonie). Domyślna wartość to 1 (elementy się kurczą).
Jeśli ustawisz flex-shrink: 0, element zachowa swój rozmiar nawet, jeśli będzie wystawał poza ekran.
4. Flex Basis: Rozmiar bazowy
Zamiast `width`, w Flexboxie używamy flex-basis. Definiuje on domyślny rozmiar elementu *zanim* zostanie rozciągnięty lub skurczony.
.item {
flex-basis: 250px; /* Element chce mieć 250px */
}
5. Skrót 'flex'
Profesjonaliści rzadko piszą te trzy właściwości oddzielnie. Używamy skrótu `flex`:
/* flex: grow shrink basis */
.card {
flex: 1 1 300px;
}
/* Oznacza: Rozciągaj się, kurcz się, ale zacznij od 300px */
6. Flex Wrap i Flow
Domyślnie Flexbox upycha wszystko w jednej linii. Aby tworzyć responsywne siatki (gridy), używamy flex-wrap: wrap.
.container {
display: flex;
flex-wrap: wrap; /* Elementy spadną do nowej linii, gdy braknie miejsca */
gap: 20px;
}