Czym jest CSS Flexbox?
CSS Flexbox (Flexible Box Layout) to jednowymiarowy model układu do rozkładu przestrzeni i wyrównywania elementów w wierszu lub kolumnie. Kontener flex definiuje się za pomocą display: flex, a jego bezpośrednie dzieci stają się elementami flex. Kluczowe właściwości kontenera: flex-direction (wiersz lub kolumna), flex-wrap (jeden vs. wiele wierszy), justify-content (wyrównanie wzdłuż osi głównej), align-items (wyrównanie wzdłuż osi poprzecznej na wiersz) i align-content (wyrównanie osi poprzecznej wielu wierszy). Kluczowe właściwości elementu: flex-grow (jak bardzo element rośnie), flex-shrink (jak bardzo się kurczy), flex-basis (rozmiar początkowy) i align-self (nadpisuje align-items kontenera dla konkretnego elementu). Flexbox idealnie nadaje się do pasków nawigacji, wierszy kart, wyśrodkowanych układów i każdego jednowymiarowego rozmieszczenia.
Jak używać Generatora CSS Flexbox
-
Dostosuj właściwości kontenera (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) za pomocą list rozwijanych i pola wejściowego.
-
Kliknij dowolny element w podglądzie, aby go zaznaczyć (staje się pomarańczowy).
-
Ustaw flex-grow, flex-shrink, flex-basis i align-self zaznaczonego elementu w panelu elementów.
-
Kliknij '+ Dodaj element', aby dodać kolejne elementy; kliknij 'Usuń', aby usunąć zaznaczony element.
-
Przełączaj między kartami CSS i HTML, aby zobaczyć wygenerowany kod, a następnie kliknij Kopiuj.
-
Kliknij 'Resetuj wszystko', aby zacząć od nowa z domyślnym układem 3 elementów.