Laboratorium CSS Flexbox
Interaktywne środowisko do nauki i generowania układów Flexbox
Ustawienia układu
Gotowe układy
Ustawienia poszczególnych elementów
Wybierz element w podglądzie lub na liście, aby edytować jego właściwości.
Skrócona ściąga po Flexboksie
Oś główna
justify-content steruje wyrównaniem wzdłuż osi głównej (określonej przez flex-direction).
Oś poprzeczna
align-items steruje wyrównaniem wzdłuż osi poprzecznej (prostopadłej do flex-direction).
Wiele linii
align-content działa tylko wtedy, gdy flex-wrap ma wartość wrap lub wrap-reverse i występuje wiele linii.
Podgląd na żywo
Wygenerowany CSS
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}Zmień ustawienia lub wybierz element. Podgląd i CSS aktualizują się razem.
O laboratorium CSS Flexbox
Laboratorium CSS Flexbox to wizualne, interaktywne narzędzie do nauki i eksperymentowania z układami CSS Flexbox. Flexbox (Flexible Box Layout) to jeden z najpotężniejszych i najczęściej używanych modułów układu CSS, przeznaczony do rozmieszczania elementów w kontenerze w elastyczny, responsywny sposób. Narzędzie pozwala zmieniać w czasie rzeczywistym każdą właściwość kontenera i elementów flex oraz dokładnie zobaczyć, jak zmienia się układ.
Najważniejsze funkcje
- Pełna kontrola nad wszystkimi właściwościami kontenera flex: flex-direction, flex-wrap, justify-content, align-items, align-content i gap
- Nadpisania dla pojedynczych elementów: order, flex-grow, flex-shrink, flex-basis i align-self
- Podgląd wizualny na żywo z kolorowymi, ponumerowanymi elementami i przerywaną krawędzią kontenera
- Gotowe układy, w tym pasek nawigacji, siatka kart, Holy Grail, wyśrodkowana treść i układ z panelem bocznym
- Automatycznie generowany kod CSS z kopiowaniem jednym kliknięciem
- Dynamiczna regulacja liczby elementów od 1 do 12
- Zaznaczanie elementów kliknięciem w celu edycji właściwości pojedynczego elementu
- Obsługa trybu ciemnego dla wygodnej pracy w każdych warunkach oświetleniowych
Właściwości Flexbox w pigułce
Flexbox działa wzdłuż dwóch osi: osi głównej (określanej przez flex-direction) i osi poprzecznej (prostopadłej do osi głównej). Właściwość justify-content rozdziela przestrzeń wzdłuż osi głównej, a align-items odpowiada za wyrównanie na osi poprzecznej. Gdy flex-wrap pozwala na zawijanie do wielu linii, align-content steruje odstępami między tymi liniami. Każdy element flex może nadpisać swoje wyrównanie za pomocą align-self, kontrolować proporcje rozciągania i zwężania oraz ustawić rozmiar bazowy za pomocą flex-basis.
Typowe wzorce układów Flexbox
Flexbox świetnie sprawdza się przy budowaniu pasków nawigacji, centrowaniu treści w poziomie i w pionie, tworzeniu siatek kart zawijających się responsywnie, budowaniu układów z panelem bocznym o stałej szerokości i elastyczną treścią główną oraz przy klasycznym układzie Holy Grail z nagłówkiem, stopką, panelem bocznym i obszarem treści głównej. Użyj przycisków gotowych układów, aby od razu zobaczyć te wzorce w działaniu.
Dla kogo jest to narzędzie?
- Webdeweloperzy, którzy uczą się CSS Flexbox po raz pierwszy
- Inżynierowie frontendu szybko prototypujący responsywne układy
- Projektanci UI/UX, którzy chcą zwizualizować układy flex przed napisaniem kodu
- Uczniowie i studenci poznający techniki układu CSS na potrzeby zajęć lub rozmów kwalifikacyjnych
- Nauczyciele pokazujący zagadnienia Flexbox na warsztatach lub lekcjach
- Każdy, kto potrzebuje szybko wygenerować kod CSS Flexbox do swoich projektów