Plac Zabaw CSS Flexbox

O Plac Zabaw CSS Flexbox

Plac Zabaw CSS Flexbox to interaktywne środowisko nauki i generator kodu dla nowoczesnego modułu CSS Flexible Box Layout. Dostosuj właściwości kontenera (flex-direction, justify-content, align-items, gap) oraz właściwości poszczególnych elementów (flex-grow, flex-shrink, flex-basis, align-self, order) i obserwuj aktualizację układu w czasie rzeczywistym. Gdy osiągniesz pożądany efekt, skopiuj gotowy do wklejenia kod CSS i HTML prosto do swojego projektu.

Co to jest CSS Flexbox?

CSS Flexbox (Flexible Box Layout) to jednowymiarowy model układu zaprojektowany do rozdzielania przestrzeni wzdłuż jednej osi (wiersza lub kolumny) i wyrównywania elementów wewnątrz kontenera. Zastępuje on starsze techniki, takie jak floaty i triki z inline-block dla pasków nawigacji, rzędów kart, wyśrodkowanej zawartości i wszelkich interfejsów, w których elementy muszą naturalnie dopasowywać się do kontenera. W przeciwieństwie do CSS Grid, który jest dwuwymiarowy, Flexbox doskonale sprawdza się w prostszych aranżacjach, gdzie kontrolujesz wyrównanie tylko w jednym kierunku naraz.

Jak używać tego Placu Zabaw

1. Wybierz gotowe ustawienie (opcjonalnie): Wybierz Holy Grail, Siatkę kart, Pasek nawigacji, Hero, Modal lub Sticky Footer, aby załadować rzeczywisty punkt wyjścia. Każde ustawienie to kompletny, działający układ, który możesz analizować lub modyfikować.
2. Dostosuj właściwości kontenera: Użyj przełączników w prawym panelu, aby ustawić flex-direction, flex-wrap, justify-content, align-items, align-content oraz gap. Scena wizualna aktualizuje się natychmiastowo.
3. Edytuj poszczególne elementy: Kliknij dowolny element w podglądzie, aby go zaznaczyć. Nadpisz jego order, flex-grow, flex-shrink, flex-basis oraz align-self niezależnie od reszty. Elementy z nadpisanymi właściwościami są oznaczone małą ikoną.
4. Dodaj lub usuń elementy: Użyj przycisków Dodaj element i Usuń zaznaczony, aby zmienić liczbę elementów i zobaczyć, jak reaguje układ.
5. Skopiuj kod: Sekcja Wygenerowany kod na dole zawsze odzwierciedla Twój aktualny układ. Skopiuj CSS, HTML lub oba jednym kliknięciem.

Odniesienie do właściwości kontenera

Kontener flex to element nadrzędny z ustawionym display: flex. Te właściwości kontrolują zachowanie wszystkich jego dzieci.

Odniesienie do właściwości elementów

Te właściwości są stosowane do poszczególnych elementów flex (dzieci kontenera flex) i nadpisują domyślne ustawienia kontenera tylko dla tego elementu.

Jaka jest różnica między justify-content a align-items?

justify-content kontroluje wyrównanie wzdłuż osi głównej, podczas gdy align-items kontroluje wyrównanie wzdłuż osi poprzecznej. Oś główna to ta, którą ustawia flex-direction — pozioma dla row, pionowa dla column. Gdy zmienisz flex-direction z row na column, obie osie zamieniają się miejscami, więc justify-content staje się pionowy, a align-items poziomy. Ta zamiana jest jednym z najczęstszych źródeł nieporozumień podczas nauki Flexbox; wskaźniki osi pod podglądem na tym placu zabaw pomagają to zobrazować.

Jak wyśrodkować element za pomocą Flexbox?

Aby wyśrodkować pojedynczy element zarówno poziomo, jak i pionowo:

Jest to nowoczesny zamiennik starszych trików centrowania z użyciem margin: auto, transform: translate(-50%, -50%) lub position: absolute. Wypróbuj to na placu zabaw, wybierając gotowe ustawienie Modal Center.

Objaśnienie rzeczywistych układów

Układ Holy Grail

Klasyczny trójkolumnowy układ strony: lewy pasek boczny, główna zawartość, prawy pasek boczny — z nagłówkiem i stopką. Historycznie bardzo trudny do zbudowania za pomocą floatów; Flexbox czyni go banalnie prostym. Środkowa kolumna używa flex: 1, dzięki czemu pochłania całą pozostałą przestrzeń poziomą, podczas gdy kolumny boczne pozostają przy swoich zadeklarowanych szerokościach.

Siatka kart

Zawijany rząd kart, które przechodzą do nowych linii, gdy okno przeglądarki się zwęża. Używa flex-wrap: wrap, gdzie każda karta otrzymuje flex: 1 1 240px, co oznacza, że karta rośnie i kurczy się, ale nigdy nie staje się węższa niż 240px.

Pasek nawigacji

Poziomy pasek nawigacyjny z logo po lewej stronie i linkami po prawej. Kluczem jest justify-content: space-between z logo i grupą linków jako dwoma elementami nadrzędnymi, plus wewnętrzny kontener flex dla samych linków.

Sekcja Hero

Pionowy stos z zawartością wyśrodkowaną zarówno poziomo, jak i pionowo — idealny dla obszarów hero na stronach lądowania. Używa flex-direction: column, justify-content: center oraz align-items: center na wysokim kontenerze.

Modal Center

Okno modalne idealnie wyśrodkowane wewnątrz swojej nakładki. Ten sam trójliniowy przepis na centrowanie pokazany powyżej, zastosowany do pełnoekranowego kontenera nakładki.

Sticky Footer

Stopka, która znajduje się na dole okna przeglądarki, gdy zawartość jest krótka, ale zostaje wypchnięta w dół, gdy zawartość jest długa. Osiąga się to poprzez nadanie body display: flex; flex-direction: column; min-height: 100vh oraz głównej zawartości flex: 1.

Jaka jest różnica między flex-grow, flex-shrink a flex-basis?

Te trzy właściwości (połączone w skrót flex) opisują, jak element radzi sobie z przestrzenią:

• flex-basis ustawia idealny rozmiar elementu przed rozdzieleniem jakiejkolwiek wolnej przestrzeni. Pomyśl o tym jako o "punkcie startowym" elementu.
• flex-grow mówi: "jeśli zostanie wolne miejsce, weź tę część dla siebie". Wartość 0 oznacza odmowę wzrostu; 1 oznacza wzrost proporcjonalny; 2 oznacza wzięcie dwukrotnie większej części niż element z 1.
• flex-shrink mówi: "jeśli zabraknie miejsca, skurcz się o tę część". Domyślnie wynosi 1 (skurcz proporcjonalny); 0 oznacza odmowę kurczenia się.

Skrót flex: 1 rozwija się do flex: 1 1 0% — równy wzrost, równe kurczenie, zerowa baza — co oznacza, że wszystkie elementy biorą równy udział w kontenerze niezależnie od zawartości. flex: auto rozwija się do flex: 1 1 auto, co szanuje rozmiar zawartości jako bazę.

Kiedy używać Flexbox, a kiedy Grid?

Używaj Flexbox dla układów jednowymiarowych, w których elementy płyną w jednym kierunku — rząd przycisków, pasek nawigacji, pojedyncza kolumna kart. Flexbox jest świadomy zawartości i świetnie sprawdza się, gdy chcesz, aby elementy same określały swój rozmiar.

Używaj CSS Grid dla układów dwuwymiarowych, w których musisz kontrolować jednocześnie wiersze i kolumny — układy całych stron, galerie zdjęć, pulpity nawigacyjne. Grid jest świadomy układu i pozwala umieszczać elementy w nazwanych ścieżkach.

Oba modele uzupełniają się, a nie konkurują. Wiele rzeczywistych projektów łączy je: układ strony w Grid z paskami nawigacyjnymi i rzędami kart we Flexbox wewnątrz.

Wskazówki dotyczące opanowania Flexbox

• Wizualizuj osie. Zawsze wiedz, który kierunek jest "główny" (main), a który "poprzeczny" (cross) — pigułki osi na placu zabaw czynią to jawnym.
• Używaj gap zamiast marginesów. Nowoczesne przeglądarki w pełni obsługują gap w kontenerach flex, co eliminuje potrzebę stosowania niewygodnych trików z marginesami na ostatnim dziecku.
• Sięgaj po flex: 1. Gdy chcesz, aby elementy dzieliły przestrzeń po równo, ten skrót jest prawie zawsze tym, czego szukasz.
• min-width: 0 na elementach flex. Elementy mają domyślną minimalną szerokość opartą na ich zawartości. Jeśli długie niełamliwe ciągi znaków (jak adresy URL) powodują przepełnienie układu, ustaw min-width: 0 na elemencie, aby to nadpisać.
• Unikaj szerokości opartych wyłącznie na procentach. Mieszanie szerokości procentowych z flex-grow może dawać zaskakujące rezultaty. Preferuj flex-basis z rozsądną wartością domyślną.

Wsparcie przeglądarek i kompatybilność

CSS Flexbox jest obsługiwany przez każdą nowoczesną przeglądarkę, w tym Chrome, Firefox, Safari, Edge oraz wszystkie główne przeglądarki mobilne. Właściwość gap w kontenerach flex zyskała powszechne wsparcie przeglądarek w 2021 roku. Starsze przeglądarki (IE10/11) wymagają prefiksów producentów i mają kilka dobrze udokumentowanych błędów; dla takich odbiorców warto rozważyć stronę flexbugs.

Często zadawane pytania

Dlaczego mój element flex wystaje poza kontener?

Elementy flex mają ukrytą właściwość min-width: auto opartą na ich zawartości. Długie słowa, bloki kodu lub tekst preformatowany mogą wymusić na elemencie szerokość większą niż kontener. Napraw to, ustawiając min-width: 0 na elemencie (lub min-height: 0 dla układów kolumnowych).

Jaka jest różnica między space-between, space-around a space-evenly?

space-between nie zostawia miejsca na końcach i daje równą przestrzeń między elementami. space-around daje pół odstępu na każdym końcu i pełne odstępy między elementami. space-evenly daje równą przestrzeń zarówno na końcach, jak i między elementami. Przełącz je na placu zabaw, aby poczuć różnicę.

Czy mogę animować właściwości flex?

Tak. flex-grow, flex-shrink, flex-basis, order oraz gap mogą być animowane za pomocą transition. Animowanie flex-direction, justify-content oraz align-items nie jest obsługiwane, ponieważ są to dyskretne właściwości wyliczeniowe.

Czy plac zabaw działa w trybie offline?

Wszystkie obliczenia Flexbox odbywają się w Twojej przeglądarce przy użyciu natywnego CSS. Po załadowaniu strony możesz korzystać z placu zabaw bez połączenia z internetem — nie ma żadnych wywołań API ani obliczeń po stronie serwera.

Czy wygenerowany kod jest gotowy do użycia na produkcji?

Tak. Eksportowany kod CSS wykorzystuje standardowe właściwości obsługiwane w każdej nowoczesnej przeglądarce. HTML używa semantycznych nazw klas (flex-container, flex-item), które możesz zmienić, aby pasowały do konwencji Twojego projektu.

Dodatkowe zasoby

• CSS Flexible Box Layout - MDN
• CSS Flexible Box Layout Module Level 1 - Specyfikacja W3C
• CSS Flex Box Layout - Wikipedia

Narzędzia dla administratorów stron:

• Kalkulator CPC
• Kalkulator CPM
• Kompresor CSS
• Generator Favicon
• Kalkulator Google AdSense
• Generator zadań Cron
• Generator Wyrażeń Crontab
• Kompresor HTML
• Konwerter HTML na tekst
• Sprawdzacz Gęstości Słów Kluczowych
• Generator tabel Markdown
• Generator tagów meta
• Usuwacz Inteligentnych Cudzysłowów
• Generator Slugów URL
• Kalkulator wartości odsłony strony
• Kalkulator wartości odwiedzających
• Kalkulator uprawnień Unix (chmod)
• Koder / Dekoder Encji HTML
• Generator Lorem Ipsum
• Escape/Unescape ciągów JSON
• Konwerter cURL do JSON
• Formatowacz SQL
• Optymalizator SVG
• Generator przekierowań .htaccess
• Sprawdzacz rozmiaru indeksowania Googlebot
• Generator Robots.txt Nowy
• Generator mapy witryny XML Nowy
• Sprawdzanie Wieku Domeny Nowy
• Sprawdzacz Open Graph Nowy
• Wyszukiwanie WHOIS Nowy
• Wyszukiwanie DNS Nowy
• Sprawdzacz Szybkości Strony Nowy
• Sprawdzacz zaufania domeny Nowy
• Sprawdzacz Przekierowań Nowy
• Generator tagów Hreflang Nowy
• Sprawdzacz uszkodzonych linków Nowy
• Plac Zabaw CSS Flexbox Nowy
• Generator CSS Grid Nowy
• Generator komend Git Nowy
• Generator Pliku .env Nowy
• Generator Poleceń cURL Nowy
• Referencja Kodów Stanu HTTP Nowy
• Parser URL Nowy
• Generator Ciągów Zapytania Nowy
• Konwerter SVG na React/JSX Nowy
• Kompilator SCSS do CSS Nowy
• Kompilator Less do CSS Nowy
• Playground TypeScript Nowy
• Generator Schematu JSON Nowy