1. Kierunek ustawia oś główną
row sprawia, że oś główna jest pozioma. column – pionowa. Po zmianie justify-content i align-items zdają się zamieniać rolami, bo zawsze podążają za logiką osi.
Generator Flexbox
Użyj gotowych szablonów dla typowych wzorców lub dostosuj każdą właściwość ręcznie. Wartości są ograniczone do bezpiecznych zakresów, aby uniknąć błędów.
Wybrany element
Kliknij dowolny element w podglądzie, aby go edytować. Indywidualne wartości są weryfikowane przed generowaniem kodu.
0
1
0
1
Piksele. Użyj 0 dla rozmiaru zależnego od treści.
Zastępuje wyrównanie kontenera dla tego elementu.
Podgląd na żywo
Kontener poniżej aktualizuje się natychmiast. Etykiety pokazują, która oś jest główna, aby ułatwić zrozumienie logiki Flexbox.
Oś główna: pozioma. Oś poprzeczna: pionowa.
Gotowy kod do skopiowania
CSS zawiera tylko właściwości wybrane w narzędziu. Klasy HTML są semantyczne, co ułatwia ich adaptację w prawdziwym komponencie.
Jak to działa
Flexbox rozmieszcza bezpośrednie dzieci kontenera wzdłuż osi głównej i osi poprzecznej. Poniżej wyjaśniamy najważniejsze aspekty.
2. Zawijanie dodaje kontrolę wierszy
Gdy flex-wrap jest ustawiony na nowrap, właściwość align-content nie ma efektu. Ma ona znaczenie tylko przy wielu wierszach.
3. Wartości elementów (negotiation)
flex-grow kontroluje, jak dzielone jest wolne miejsce, flex-shrink – jak elementy się kurczą, a flex-basis to rozmiar początkowy przed negocjacją miejsca.
Założenia: wartości basis są w pikselach, odstępy (gap) w pełnych pikselach, a podgląd odzwierciedla zachowanie nowoczesnych przeglądarek.
Szybka ściąga właściwości
Skorzystaj z tego zestawienia po przetestowaniu układu w generatorze.
justify-content
Przesuwa elementy wzdłuż osi głównej. Idealne do nawigacji, grup przycisków i rozkładania elementów w wierszu.
align-items
Kontroluje wyrównanie poprzeczne dla wszystkich elementów naraz. Używaj, gdy wysokości kart są nierówne.
align-self
Zastępuje wyrównanie poprzeczne dla jednego konkretnego elementu bez zmiany reszty grupy.