Generator CSS Flexbox
Generator CSS Flexbox pozwala ustawić flex-direction, justify-content, align-items, flex-wrap, align-content i gap na kontenerze, podejrzeć na żywo do 20 elementów i skopiować wygenerowany CSS.
O tym narzędziu
Generator CSS Flexbox pozwala ustawić flex-direction, justify-content, align-items, flex-wrap, align-content i gap na kontenerze, podejrzeć na żywo do 20 elementów i skopiować wygenerowany CSS.
Jak używać
- Wybierz kierunek i zawijanie.
- Ustaw justify-content i align-items (oraz align-content dla zawiniętych linii).
- Ustaw gap i liczbę elementów w podglądzie.
- Kliknij Copy CSS, aby użyć reguł kontenera.
Warto wiedzieć
- justify-content wyrównuje elementy wzdłuż osi głównej; align-items wyrównuje je na osi poprzecznej.
- flex-direction: column zamienia osie, więc justify-content działa wtedy w pionie.
- align-content działa tylko wtedy, gdy elementy zawijają się do kilku linii.
- Właściwość gap działa we Flexboksie we wszystkich aktualnych popularnych przeglądarkach.
- Flexbox jest jednowymiarowy; do wierszy i kolumn jednocześnie użyj CSS Grid.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
Jak wyśrodkować diva za pomocą Flexboksa?
Na rodzicu ustaw display: flex; justify-content: center; align-items: center; — dziecko zostanie wyśrodkowane w poziomie i w pionie.
Czym różni się justify-content od align-items?
justify-content rozmieszcza elementy wzdłuż osi głównej (domyślnie wiersza); align-items ustawia je wzdłuż osi poprzecznej.
Kiedy używać Flexboksa zamiast Grida?
Flexboksa używaj do układów jednowymiarowych, takich jak paski nawigacji czy rzędy przycisków, a Grida do dwuwymiarowych układów stron.
Dlaczego align-content nic nie robi?
align-content działa tylko wtedy, gdy flex-wrap pozwala elementom zawijać się do więcej niż jednej linii.