Generator Flexbox
Konfiguruj kontener flex i jego elementy za pomocą wizualnych kontrolek, obserwuj zmiany na żywo i skopiuj kod CSS jednym kliknięciem.
Układ jest tworzony bezpośrednio w Państwa przeglądarce. Żadne ustawienia nie są przesyłane do BroBroGo.
FAQ
Jaka jest różnica między justify-content a align-items?
Właściwość justify-content rozmieszcza elementy wzdłuż osi głównej (zgodnie z kierunkiem wiersza lub kolumny), natomiast align-items pozycjonuje je w poprzek tej osi. Po zmianie kierunku z row na column osie zamieniają się miejscami — wtedy justify-content działa z góry na dół, a align-items z lewej do prawej.
Jak działa konfiguracja poszczególnych elementów?
Wybierz element według jego numeru, a następnie określ, jak bardzo ma rosnąć (grow), kurczyć się (shrink), jaki jest jego rozmiar początkowy (basis) oraz jego własne wyrównanie poprzeczne (align-self). Właściwość order pozwala zmienić kolejność wyświetlania elementu na ekranie bez modyfikowania kodu HTML. Tylko elementy, które rzeczywiście zmodyfikujesz, otrzymają własne reguły w wygenerowanym kodzie CSS.
Kiedy właściwości wrap i align-content mają znaczenie?
Gdy zawijanie jest wyłączone, wszystkie elementy są wymuszane do wyświetlenia w jednej linii i mogą ulec zwężeniu. Po włączeniu zawijania (wrap) elementy, które się nie mieszczą, przechodzą do kolejnego wiersza — wtedy do głosu dochodzi align-content, kontrolujący odstępy między wierszami jako całością. Właściwość gap definiuje odstępy między elementami oraz wierszami bez używania marginesów.