- Czym różni się justify-content od align-items?
- justify-content ustawia elementy wzdłuż osi głównej (kierunku z flex-direction — row = poziomo, column = pionowo). align-items ustawia je wzdłuż osi poprzecznej (prostopadłej do głównej). Przy flex-direction: row justify-content przesuwa elementy w lewo i prawo, a align-items w górę i w dół. Przy column zamieniają się rolami. Te dwie właściwości nigdy się nie nakładają — każda działa tylko na swojej osi.
- Dlaczego align-content nic nie robi?
- align-content działa tylko wtedy, gdy elementy zawijają się do kilku linii. Jeśli flex-wrap ma wartość nowrap (domyślną), wszystkie elementy zostają w jednej linii i align-content nie ma czego wyrównywać. Ustaw flex-wrap na wrap, dodaj tyle elementów, żeby przeszły do drugiego rzędu, a align-content zacznie sterować rozłożeniem rzędów na osi poprzecznej.
- Co właściwie robi flex-direction: row-reverse?
- Odwraca kolejność ustawiania elementów wzdłuż osi głównej bez zmiany kolejności w kodzie HTML. Przy row-reverse element 1 jest po prawej, element 2 na lewo od niego i tak dalej. justify-content: flex-start oznacza wtedy prawą krawędź zamiast lewej. Tak samo z column-reverse — elementy układają się od dołu do góry. Przydaje się w układach RTL albo do wizualnej zmiany kolejności bez ruszania DOM (co zachowuje kolejność tabulacji i czytnika ekranu).
- Używać gap, margin czy obu?
- Używaj gap. Dodaje odstęp tylko między elementami, nie na zewnętrznych krawędziach, i działa w obu kierunkach (row-gap, column-gap), gdy włączysz wrap. Margin na elementach potomnych to stare obejście — dodaje odstęp z każdej strony, także na zewnętrznych krawędziach, i trzeba z nim walczyć ujemnym marginesem rodzica. gap działa w każdej przeglądarce wydanej po kwietniu 2021, czyli we wszystkim, czego się dziś używa.
- Czym flexbox różni się od CSS Grid?
- Flexbox jest jednowymiarowy — układasz elementy w rzędzie albo w kolumnie. Grid jest dwuwymiarowy — definiujesz wiersze i kolumny i umieszczasz elementy w komórkach. Zasada: paski nawigacji, rzędy przycisków, pionowe stosy, sidebar + treść i wszystkie przypadki, w których elementy same decydują o swoim rozmiarze = flexbox. Galerie zdjęć, dashboardy, układy jak w magazynie, wszystko z nazwanymi ścieżkami = grid. Da się je łączyć: komórka grida może być kontenerem flex.
- Dlaczego jeden element rośnie, a inne nie?
- Ten element ma ustawione flex-grow na liczbę dodatnią. flex-grow mówi elementowi, ile wolnego miejsca ma zająć — 0 znaczy „nie rośnij”, 1 znaczy „weź równą część”, 2 znaczy „weź dwa razy więcej niż elementy z 1”. Ten generator skupia się na właściwościach kontenera; flex-grow, flex-shrink i flex-basis ustawia się na elementach potomnych, osobno dla każdego, we własnym CSS.
- Czy ten CSS zadziała w starszych przeglądarkach?
- We wszystkich nowoczesnych — tak. Flexbox jest obsługiwany wszędzie od 2017 roku (Chrome, Firefox, Safari, Edge, przeglądarki mobilne). Jedynym nowszym dodatkiem jest właściwość gap w kontenerach flex — w pełni obsługiwana od kwietnia 2021. Jeśli celujesz w IE 11 albo mobilną przeglądarkę z 2020 roku, zastąp gap marginesami na elementach potomnych i unikaj space-evenly (space-around to prawie to samo).
- Dlaczego moje elementy nie kurczą się poniżej swojej zawartości?
- Każdy element flex ma domyślnie min-width: auto, czyli rozmiar swojej zawartości (najdłuższe słowo w akapicie, naturalna szerokość obrazka). To wygrywa z flex-shrink. Dodaj min-width: 0 do elementu potomnego, żeby flex-shrink mógł go faktycznie zmniejszyć poniżej rozmiaru zawartości. To najczęstsza niespodzianka we flexboksie — a poprawka to jedna linijka.
