O tym narzędziu
CSS Flexbox Playground to interaktywny edytor głównych właściwości układu kontenera flex. Wybierz wartości dla flex-direction, justify-content, align-items i flex-wrap z czterech list rozwijanych, a podgląd pięciu ponumerowanych pól natychmiast się przeorganizuje, dzięki czemu zobaczysz, jak każda właściwość kształtuje układ, zanim napiszesz jakikolwiek kod.
Pod podglądem, w miarę pracy, generowana jest odpowiadająca reguła .container: display: flex, a po niej cztery wybrane deklaracje. Jeden przycisk kopiuje cały blok do schowka, gotowy do wklejenia w arkuszu stylów. Udostępniane są tylko te właściwości na poziomie kontenera; ustawienia poszczególnych elementów, takie jak flex-grow, order czy align-self, nie są objęte.
Wszystko działa w przeglądarce. Nic nie jest wysyłane, nie ma kont ani śledzenia i działa offline. To szybki sposób na wyrobienie intuicji w zakresie flexboxa lub na przygotowanie startowej reguły, którą następnie dopracujesz ręcznie.
Najczęściej zadawane pytania
Co pokazuje podgląd?
Kontener flex zawierający pięć ponumerowanych pól, które przeorganizują się na żywo, gdy zmieniasz flex-direction, justify-content, align-items lub flex-wrap.
Czy wygenerowany CSS jest gotowy do użycia?
Tak. Skopiuj wygenerowaną regułę .container bezpośrednio do arkusza stylów; zawiera display: flex oraz cztery wybrane właściwości.
Które właściwości flexboxa mogę dostosować?
Cztery listy rozwijane sterują flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) oraz flex-wrap (nowrap, wrap, wrap-reverse).
Czy wynik zawiera gap lub ustawienia flex dla poszczególnych elementów?
Nie. Skopiowana reguła zawiera tylko display: flex i cztery właściwości kontenera. Odstęp 8px w podglądzie służy jedynie do rozmieszczenia, a właściwości na poziomie elementu, takie jak flex-grow, order czy align-self, nie są uwzględnione.
Więcej narzędzi