Solidne zrozumienie Flexbox i CSS Grid jest niezbędne, jeśli chcesz tworzyć oszałamiające, responsywne strony internetowe.
Jeśli piszesz CSS od dłuższego czasu, są duże szanse, że przynajmniej słyszałeś o tych terminach. Być może nawet do pewnego stopnia używałeś jednego lub obu. Oba są potężnymi częściami CSS, z podobnymi, ale subtelnie różnymi przypadkami użycia.
Co to jest Flexbox?
Flexbox to jednowymiarowa metoda układu CSS, która istnieje już od jakiegoś czasu. Możesz myśleć o Flexboksie jako o zbiorze powiązanych właściwości CSS, których możesz użyć do wyrównania elementów HTML w kontenerze i zarządzania przestrzenią między nimi.
Przed Flexbox ten typ układu wymagał frustrującego i nieporęcznego używania pływaka i właściwości pozycji.
Jeśli martwisz się obsługą Flexbox przez przeglądarkę, nie martw się. Według caniuse.com, wszystkie nowoczesne przeglądarki obsługują Flexbox.
Podstawy Flexboksa
Chwila Flexbox zawiera wiele właściwości CSS, podstawy są dość proste. Korzystanie z Flexbox zawsze rozpoczyna się od zadeklarowania kontenera nadrzędnego jako kontenera elastycznego przez dodanie
wyświetlacz: elastyczny do jego zasad stylu. Wykonanie tego automatycznie powoduje, że wszystkie elementy potomne tego elementu stają się elementami elastycznymi.Następnie możesz kontrolować dystrybucję przestrzeni w elastycznym pojemniku za pomocą właściwość justify-content. Możesz kontrolować wyrównanie elementów elastycznych za pomocą wyrównaj elementy nieruchomość.
Oto przykład kodu, który wykorzystuje Flexbox do równomiernego rozłożenia przestrzeni w kontenerze między jego elementami podrzędnymi i wyrównania ich wszystkich na środku kontenera. To jest kod HTML:
<klasa div="pojemnik">
<dz>1</div>
<dz>2</div>
<dz>3</div>
<dz>4</div>
<dz>5</div>
</div>To jest CSS:
.pojemnik {
wyświetlacz: elastyczny;
szerokość: 100%;
justify-content: spacja wokół;
elementy wyrównania: środek;
obramowanie: 1 px jednolita czerń;
wysokość: 200px;
}
.pojemnik > div {
wysokość: 100px;
szerokość: 100 pikseli;
kolor tła: czerwony;
kolor biały;
rozmiar czcionki: 5rem;
wyrównanie tekstu: środek;
promień obramowania: 5px;
}
A oto wyjście:
Co to jest siatka CSS?
CSS Grid to system układu, który jest uzupełnieniem Flexbox. Flexbox jest potężny, ale nie bardzo nadaje się do niektórych typów układów. Próba ułożenia struktury całej strony za pomocą Flexboksa okaże się frustrującym zadaniem, wymagającym brzydkich, niesematycznych znaczników i zhakowanego CSS.
CSS Grid nie jest zamiennikiem Flexboksa, ale raczej alternatywnym systemem w niektórych sytuacjach.
Obsługa CSS Grid nie jest tak obszerna jak w przypadku Flexbox, ale Grid jest dość dobrze wspierane w 2022 r.
Podstawy siatki CSS
Koncepcja siatki jest prosta. Jak sama nazwa wskazuje, CSS Grid umożliwia podzielenie przestrzeni w kontenerze nadrzędnym na siatkę wierszy i kolumn z dowolną liczbą wierszy/kolumn. Następnie określasz położenie elementów podrzędnych, odwołując się do linii siatki elementu nadrzędnego.
Zacznij od dodania wyświetlacz: siatka do kontenera nadrzędnego. Następnie skorzystaj z rzędy szablonów siatki I kolumny szablonu siatki właściwości, aby określić wiersze i kolumny, na które chcesz podzielić siatkę. Możesz wtedy użyć tzw kolumna siatki I wiersz siatki właściwości na elementach potomnych, aby powiedzieć im, gdzie w siatce powinny się znajdować. Przyjrzyjmy się przykładowi Grid, który wykorzystuje wcześniejszą konfigurację pięciu elementów, ale w bardziej skomplikowanym układzie.
Oto kod HTML:
<klasa div="pojemnik">
<dz>1</div>
<klasa div="dwa">2</div>
<klasa div="trzy">3</div>
<klasa div="cztery">4</div>
<klasa div="pięć">5</div>
</div>Oto kod CSS:
.pojemnik {
wyświetlacz: siatka;
szerokość: 100%;
rzędy szablonów siatki: powtórz (3, 1fr);
kolumny szablonu siatki: powtórz (3, 1fr);
luka: 0.5 rem;
obramowanie: 1 px jednolita czerń;
wysokość: 300px;
}.pojemnik > div {
kolor tła: czerwony;
kolor biały;
rozmiar czcionki: 5rem;
wyrównanie tekstu: środek;
promień obramowania: 5px;
}
.pojemnik > .dwa {
wiersz siatki: 2;
kolumna siatki: 2;
}
Oto dane wyjściowe:
CSS Grid zawiera również sporo inne właściwości, których możesz użyć do tworzenia bardziej złożonych układów.
Którego powinieneś użyć?
Po pierwsze, ważne jest, aby pamiętać, że nic nie stoi na przeszkodzie, aby używać razem Flexbox i Grid, aw niektórych przypadkach jest to optymalny wybór. To powiedziawszy, odpowiedzmy na pytanie, które układy każdego z tych systemów najlepiej nadają się do wdrożenia.
Flexbox najlepiej nadaje się do układów budynków, które obejmują wyrównanie i rozmieszczenie elementów w jednej linii. Przykładami tego rodzaju układu są wyrównanie ikon na końcu sekcji lub rozmieszczenie łączy na pasku nawigacyjnym.
Z drugiej strony siatka świeci najjaśniej, gdy trzeba precyzyjnie ustawić elementy względem innych (zarówno w poziomie, jak i w pionie) i potrzebujesz tego ustawienia, aby łatwo dostosować się do różnych rozmiarów ekranu.
Aby zademonstrować, oto kod, który musisz napisać, aby odtworzyć układ z przykładu Grid za pomocą Flexbox.
Kod HTML:
<klasa div="pojemnik">
<klasa div="podrzędny">
<dz>1</div>
<dz>5</div>
</div><klasa div="pod dwa">
<dz>2</div>
</div>
<klasa div="pod trzy">
<dz>4</div>
<dz>3</div>
</div>
</div>
CSS:
.pojemnik {
obramowanie: 1 px jednolita czerń;
wysokość: 300px;
}.pod {
wyświetlacz: elastyczny;
szerokość: 100%;
}.jeden, .trzy {
justify-content: odstęp między
}.dwa {
justify-content: środek;
}
.pod > div {
wysokość: 100px;
szerokość: 100 pikseli;
kolor tła: czerwony;
kolor biały;
rozmiar czcionki: 5rem;
wyrównanie tekstu: środek;
promień obramowania: 5px;
}
A oto wyjście:
Najważniejszą rzeczą, na którą należy zwrócić uwagę, jest to, że chociaż ten kod generuje takie same dane wyjściowe jak przykład Grid, znaczniki tutaj są znacznie bardziej skomplikowane. Implementacja tego układu wymaga podkontenerów i musisz umieścić ponumerowane elementy div w znacznikach w innej kolejności.
Ponadto załóżmy, że musisz przesunąć ten układ do niezręcznej pozycji: powiedzmy wyrównanie piątego elementu div z drugim. Jeśli użyłbyś do tego Flexbox, musiałbyś się do tego zastosować pozycja: względna lub coś podobnego. Używając Grid, wszystko czego potrzebujesz to przesunięcie kolumna siatki nieruchomość.
Ale dla kontrastu zaimplementowanie prostego wyrównania pojedynczej linii z przykładu Flexbox z Grid spowodowałoby znacznie więcej CSS. Siatka jest oczywiście mniej odpowiednia dla tego rodzaju układu.
Podczas gdy Flexbox i Grid mogą w większości replikować swoje efekty, są pewne wyjątki. Nakładanie się elementów jest dość trudne przy użyciu tylko Flexbox, ale jest bardzo łatwe dzięki Grid. Grid nie pozwala również elementom odpychać się od innych elementów z marginesem: auto tak, jak robi to Flexbox.
Flexbox i Grid to potężne systemy układów
Flexbox i CSS Grid to systemy projektowania, które ułatwiają układanie treści strony internetowej. Siatka najlepiej sprawdza się w układach dwuwymiarowych z wieloma elementami, które muszą być precyzyjnie rozmieszczone względem siebie. Flexbox jest lepszy w przypadku układów jednowymiarowych lub jednoliniowych, w których wystarczy rozmieścić kilka elementów w określony sposób.