Ściąga flexbox i grid (interaktywna) z Tailwind | We.Inc
Każda właściwość flexbox i CSS grid na żywym kontenerze, który możesz zmieniać, kreator grid-template-areas, przewodnik wyboru między flex a grid oraz klasy Tailwind.
Ściąga flexbox i grid
Flexbox układa elementy w jednym kierunku, w wierszu albo w kolumnie, i najlepiej sprawdza się w paskach narzędzi, nawigacji i centrowaniu. Grid rozmieszcza elementy jednocześnie w wierszach i kolumnach i pasuje do układów stron i galerii kart. Ustaw display: flex lub display: grid na rodzicu, a potem używaj właściwości poniżej; każda z nich aktualizuje tutaj żywy kontener.
Flexbox czy grid?
Układ
Wybór
Wyśrodkowanie jednej rzeczy w pudełku
Dowolny: grid z place-items: center jest najkrótszy
Rząd przycisków lub linków nawigacji
Flexbox
Elementy o nieznanej szerokości, które mają się zawijać
Flexbox z flex-wrap
Karty w równych kolumnach
Grid z repeat(auto-fill, minmax())
Nagłówek, pasek boczny, treść, stopka
Grid z grid-template-areas
Wyrównanie elementów w wierszach i kolumnach
Grid
Dwa żywe kontenery, jeden flex i jeden grid, z kontrolką dla każdej właściwości kontenera i jednego wybranego elementu. Każda zmiana pokazuje CSS i klasę Tailwind. Pod nimi namaluj układ strony w kreatorze grid-template-areas i skopiuj wynik. Tabele referencyjne ładnie się drukują.
Użyj kontrolek flexbox, aby zmienić kontener, a potem wybierz element, aby wypróbować grow, shrink, basis, order i align-self.
Zrób to samo w placu zabaw grid, łącznie ze spanami, które rozciągają jeden element na kilka kolumn lub wierszy.
W kreatorze obszarów wybierz nazwę obszaru i klikaj komórki, aby je zamalować. CSS dla kontenera i każdego obszaru pojawi się poniżej.
Naciśnij Drukuj, aby dostać tabele właściwości na papierze lub jako PDF.
Do odstępów między elementami zacznij od gap zamiast marginesów. Dodaje on miejsce tylko między elementami, nigdy na zewnętrznych krawędziach.
flex: 1 na każdym elemencie tworzy kolumny równej szerokości, które nadal reagują na treść; grid z kolumnami 1fr ignoruje szerokość treści.
Używaj order i rozmieszczenia w grid tylko do poprawek wizualnych. Użytkownicy klawiatury i czytników ekranu podążają za kolejnością w źródle, więc kolejność w HTML nadal powinna mieć sens.
minmax(0, 1fr) zamiast 1fr powstrzymuje długie słowo lub szeroki obraz przed rozepchnięciem kolumny grid ponad jej udział.
Najczęściej zadawane pytania
Czym różni się justify-content od align-items?
justify-content działa wzdłuż osi głównej, która w wierszu flex biegnie od lewej do prawej. align-items działa w poprzek niej, w wierszu od góry do dołu. Zmień flex-direction na column, a oba zamienią się kierunkami fizycznymi, dlatego centrowanie czasem wydaje się używać niewłaściwej właściwości.
Dlaczego justify-content nic nie robi?
Działa tylko wtedy, gdy na osi głównej jest wolne miejsce. Jeśli element ma flex-grow: 1 albo elementy wypełniają wiersz, nie ma czego rozdzielać. W grid justify-content przesuwa cały zestaw ścieżek, a justify-items wyrównuje elementy wewnątrz ich własnych komórek.
Jak działają grid-template-areas?
Rysujesz układ jako stringi, po jednym na wiersz, z nazwą dla każdej komórki, na przykład "header header" "side main". Każde dziecko zajmuje potem nazwę przez grid-area: header. Obszary muszą tworzyć prostokąty, a kropka oznacza pustą komórkę.
Czy mogę używać flexbox wewnątrz grid?
Tak, i to częste. Grid rozmieszcza duże regiony lub karty, a flexbox układa treść wewnątrz każdego z nich, na przykład ikonę obok etykiety albo stopkę przypiętą do dołu karty.
Czy gap jest obsługiwany we flexbox?
Tak. Wszystkie aktualne główne przeglądarki obsługują gap w kontenerach flex, tak samo jak w grid, więc stary trik z ujemnymi marginesami na kontenerze nie jest już potrzebny.
Dwie osie
Każdy kontener flex ma oś główną ustaloną przez flex-direction i oś poprzeczną prostopadłą do niej. Właściwości zaczynające się od justify działają na osi głównej, a te zaczynające się od align na osi poprzecznej. Gdy to zrozumiesz, większość zagadek z flexbox sprowadza się do pytania, o którą oś chodzi.
Grid ma zamiast tego stałą parę osi: inline (zwykle poziomą) i block (zwykle pionową). justify-* wyrównuje wzdłuż osi inline, a align-* wzdłuż osi block, zarówno dla całej siatki, jak i elementów wewnątrz komórek.
Jak elementy flex ustalają swój rozmiar
Każdy element zaczyna od swojego flex-basis albo od rozmiaru treści, gdy basis ma wartość auto. Jeśli w linii zostało miejsce, wolna przestrzeń jest dzielona proporcjonalnie do flex-grow. Jeśli linia jest przepełniona, elementy kurczą się proporcjonalnie do flex-shrink pomnożonego przez ich basis.
Skrót flex: 1 oznacza grow 1, shrink 1, basis 0%, więc każdy element kończy z tą samą szerokością niezależnie od treści. flex: auto zachowuje rozmiar treści jako punkt wyjścia, więc dłuższe etykiety dostają szersze pola.
Responsywne siatki bez media queries
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) mieści tyle kolumn o szerokości co najmniej 220 pikseli, ile pozwala kontener, i rozciąga je, aby wypełniły wiersz. Karty przepływają od jednej kolumny na telefonie do czterech lub pięciu na szerokim ekranie bez żadnych breakpointów.
auto-fit zachowuje się tak samo, dopóki elementów nie jest mniej niż kolumn: auto-fill zachowuje puste kolumny, a auto-fit je zwija, więc istniejące elementy rozciągają się na cały wiersz.