Generator Flexbox
Ustaw kontener Flexbox na żywo i skopiuj gotowy CSS.
- Natychmiast
- Za darmo
- Prywatnie (przetwarzane lokalnie)
- Bez rejestracji
Opanuj Flexbox bez zgadywania
Wybierz kierunek, wyrównanie, zawijanie i odstęp: podgląd aktualizuje się na żywo, a CSS kontenera jest gotowy do skopiowania.
-
Ustaw właściwości
direction, justify, align, wrap, gap.
-
Obserwuj podgląd
Ponumerowane elementy reagują na żywo.
-
Skopiuj CSS
Zastosuj do swojego kontenera.
CSS kontenera
| Właściwość | Rola |
|---|---|
| display: flex | Włącza Flexbox |
| flex-direction | Wiersz lub kolumna |
| justify-content | Rozmieszczenie (oś główna) |
| align-items | Wyrównanie (oś poprzeczna) |
| gap | Odstęp między elementami |
CSS dotyczy rodzica; dzieci układają się same. Wszystko generowane w przeglądarce.
Najczęstsze pytania
Do czego służy Flexbox?
Flexbox to tryb układu CSS do wyrównywania i rozmieszczania elementów w wierszu lub kolumnie. Automatycznie zarządza odstępami, centrowaniem i zawijaniem, co mocno upraszcza układy responsywne.
Jaka różnica między justify-content a align-items?
justify-content rozmieszcza elementy wzdłuż osi głównej (poziomej przy row), align-items wyrównuje je na osi poprzecznej (pionowej przy row). Przy column obie osie się zamieniają.
Wygenerowany CSS dotyczy kontenera czy elementów?
Kontenera. Właściwości (display: flex, justify-content itd.) trafiają na rodzica; dzieci układają się same. Podgląd pokazuje ponumerowane elementy.
Co robi flex-wrap?
Domyślnie (nowrap) elementy zostają w jednym wierszu, kurcząc się w razie potrzeby. Z wrap przechodzą do następnego wiersza, gdy brakuje miejsca — przydatne do płynnych siatek.