Generator Flexbox
Ustaw właściwości i przeczytaj prostym językiem, co faktycznie robią.
- Działa w przeglądarce — twój tekst nigdy nie jest nigdzie wysyłany
- Bez rejestracji, bez limitów, za darmo, tak często, jak chcesz
Jak to działa
Flexbox nie jest skomplikowany, ale jedna rzecz łapie niemal każdego: justify-content i align-items nie oznaczają poziomo i pionowo. Oznaczają wzdłuż kierunku i w poprzek niego, a kierunek sam ustawiasz.
Pułapka, powiedziana wprost
Przy flex-direction: row justify-content działa poziomo, a align-items pionowo. Przełącz na column, a zamieniają się miejscami całkowicie. Każda godzina stracona na flexboxie to w istocie to. Objaśnienie poniżej aktualizuje się, gdy zmieniasz kierunek, więc zależność jest widoczna, a nie wykuta na pamięć.
Oś główna i oś poprzeczna
Oś główna to ta, wzdłuż której płyną elementy, ustawiana przez flex-direction. Oś poprzeczna jest do niej prostopadła. justify-content rozdziela miejsce wzdłuż osi głównej; align-items ustawia elementy na osi poprzecznej. Gdy te dwie nazwy się utrwalą, reszta wynika sama.
gap i dlaczego zastąpił marginesy
gap wstawia odstęp między elementami, nie dodając go na zewnątrz pierwszego i ostatniego, co dokładnie psują marginesy i co ludzie naprawiali kiedyś trikami z :last-child. Jest obsługiwany w każdej aktualnej przeglądarce i nie ma już powodu, by go unikać.
nowrap oznacza zmniejszanie, a nie przepełnienie
Domyślne jest nowrap, a elementy zmniejszają się poniżej swojego naturalnego rozmiaru, by się zmieścić, zamiast przechodzić do nowej linii. Dlatego tekst czasem nieoczekiwanie się ściska w wierszu flex. Ustawienie wrap pozwala elementom przejść niżej; min-width: 0 na elemencie potomnym zatrzymuje jego kurczenie się poniżej zawartości.
Wyśrodkowanie w obu kierunkach
justify-content: center z align-items: center wyśrodkowuje element w obu kierunkach niezależnie od flex-direction, co jest jedyną kombinacją wartą zapamiętania na wyrywki.
Generator Flexbox — pytania
Dlaczego align-items przesuwa elementy poziomo?
Ponieważ flex-direction to column. Obie właściwości podążają za kierunkiem, a nie za ekranem.
Jaka jest różnica między osią główną a poprzeczną?
Oś główna to kierunek, w którym płyną elementy, ustawiany przez flex-direction. Oś poprzeczna jest do niej prostopadła.
Jak wyśrodkować coś w obu kierunkach?
justify-content: center razem z align-items: center.
Dlaczego mój tekst jest ściśnięty?
Domyślne nowrap zmniejsza elementy, by się zmieściły. Ustaw flex-wrap: wrap lub min-width: 0 na elemencie potomnym.
Czy mogę używać gap z flexboxem?
Tak, w każdej aktualnej przeglądarce. Jest lepszy niż marginesy, bo nie dodaje odstępu na końcach.