Poznaj różnice pomiędzy nowoczesnymi metodami układu CSS, rozwiązując praktyczny problem: ustawianie kolumn w linii.
Jeśli chodzi o układy CSS, dwoma głównymi narzędziami do Twojej dyspozycji są Grid i Flexbox. Chociaż oba są świetne w tworzeniu układów, służą różnym celom i mają różne mocne i słabe strony.
Dowiedz się, jak zachowują się obie metody układu i kiedy należy używać jednej, a kiedy drugiej.
Różne zachowanie CSS Flexbox i Grid
Aby pomóc w wizualizacji rzeczy, utwórz plik indeks.html plik w preferowanym folderze i wklej następujący znacznik:
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="flex-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div><h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>
Obydwa elementy div zawierają dokładnie te same dzieci, więc możesz zastosować do każdego inny system i porównać je.
Możesz także zobaczyć, że HTML importuje plik arkusza stylów o nazwie styl.css. Utwórz ten plik w tym samym folderze co indeks.html i wklej w nim następujące style:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Twoja strona powinna wyglądać tak:
Teraz skręć pierwszy do kolumny elastycznej, po prostu dodaj następujący kod do swojego arkusza stylów:
.flex-container {
display: flex;
}
Oto wynik:
The pojemnik elastyczny div teraz układa swoje elementy podrzędne w kolumnach. Kolumny te są elastyczne i responsywne — dostosowują swoją szerokość do dostępnej przestrzeni w rzutni. To zachowanie jest jednym z głównych podstawowe koncepcje stojące za Flexboxem.
Aby zapobiec przepełnieniu kolumn w pojemnik elastyczny, możesz skorzystać z owinięcie elastyczne nieruchomość:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Jeśli nie ma wystarczająco dużo miejsca, aby elementy podrzędne zmieściły się w jednej linii, zostaną one teraz owinięte i kontynuowane w następnej.
Teraz zastosuj układ siatki do drugiego używając tego CSS:
.grid-container {
display: grid;
}
Z samą powyższą deklaracją nic się nie stanie, ponieważ domyślne zachowanie Grid tworzy wiersze układane jeden na drugim.
Aby przełączyć się na wyświetlanie kolumnowe, należy zmienić automatyczny przepływ siatki własność (tzn wiersz domyślnie):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Oto wynik:
Aby określić dokładną liczbę kolumn w każdym wierszu, użyj kolumny szablonów siatki:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Ta wartość tworzy pięć kolumn o równej szerokości. Aby uzyskać zachowanie zawijania podobne do Flexbox, możesz użyć właściwości responsywnych, takich jak automatyczne dopasowanie I minimum maksimum:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Często usłyszysz, że Flexbox i Grid są określane odpowiednio jako jednowymiarowe i dwuwymiarowe. Nie jest to jednak cała prawda, ponieważ zarówno Flexbox, jak i Grid mogą tworzyć dwuwymiarowy system układu. Po prostu robią to na różne sposoby, z różnymi ograniczeniami.
Najważniejszy jest sposób, w jaki można kontrolować jednowymiarowy aspekt układu. Rozważmy na przykład następujący obraz:
Obserwuj, jak spójna jest kolumna Grid i jak nierówna jest każda kolumna w Flexboksie. Każdy wiersz/kolumna w elastycznym kontenerze jest niezależny od drugiego. Dlatego niektóre mogą być większe od innych, w zależności od rozmiaru ich zawartości. Są one mniej podobne do kolumn, a bardziej do niezależnych bloków.
Siatka działa inaczej, konfigurując siatkę 2D z domyślnie zablokowanymi słupami. Kolumna z krótkim tekstem będzie miała ten sam rozmiar, co kolumna ze znacznie dłuższym tekstem, jak pokazano na powyższym obrazku.
Podsumowując, CSS Grid jest nieco bardziej zorganizowany, podczas gdy Flexbox jest bardziej zorganizowany elastyczny i responsywny system układu. Te alternatywne systemy układu są dobrze nazwane!
Kiedy używać Flexboxa
Czy chcesz polegać na wewnętrznym rozmiarze każdej kolumny/wiersza zdefiniowanym na podstawie ich zawartości? A może chcesz mieć zorganizowaną kontrolę z perspektywy rodzica? Jeśli Twoja odpowiedź jest pierwsza, to Flexbox jest dla Ciebie idealnym rozwiązaniem.
Aby to zademonstrować, rozważ poziome menu nawigacyjne. Zamień znaczniki w tagi z tym:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
Zamień znaczniki w pliku CSS na:
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
Oto wynik:
Teraz przekształć pierwszą nawigację w układ elastyczny, a drugą w układ siatki, dodając następujący CSS:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Porównaj wyniki, aby zobaczyć, który był bardziej odpowiedni:
Z powyższego obrazka widać, że Flexbox jest w tym przypadku idealnym rozwiązaniem. Masz elementy, które chcesz umieścić obok siebie i zachować ich wewnętrzny rozmiar (duży lub mały, w zależności od długości tekstu). W przypadku siatki każda komórka ma stałą szerokość i nie wygląda to tak dobrze — przynajmniej w przypadku łączy w postaci zwykłego tekstu.
Kiedy używać siatki CSS
Jednym z miejsc, w którym Grid naprawdę się wyróżnia, jest sytuacja, w której chcesz stworzyć sztywny system z rodzica. Przykładem jest zestaw elementów karty, które powinny być jednakowo szerokie, nawet jeśli zawierają różną zawartość.
Zamień znaczniki wewnątrz tagi z tym:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>
Dodaj ten CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Zaczynasz od wyświetlacza Flexbox, aby zobaczyć, jak wygląda i porównać go z wyświetlaczem siatkowym. Oto dane wyjściowe:
Zwróć uwagę, że ostatnia kolumna jest większa od pozostałych ze względu na swój wewnętrzny rozmiar, z czym Flexbox dobrze sobie radzi. Ale aby uzyskać tę samą szerokość za pomocą Flexbox, musiałbyś przeciwstawić się wewnętrznemu rozmiarowi, dodając:
.columns > * {
flex: 1;
}
To załatwia sprawę. Ale Grid lepiej nadaje się do takich przypadków. Wystarczy określić liczbę kolumn i gotowe:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Oto wynik:
Kolejną zaletą korzystania z siatki jest to, że rodzic kontroluje układ elementów podrzędnych. Możesz więc dodawać i usuwać elementy podrzędne, nie martwiąc się o uszkodzenie układu.
Kiedy więc powinieneś używać Grid lub Flexbox?
Podsumowując, CSS Grid jest świetny, gdy potrzebujesz zorganizowanej kontroli z perspektywy rodzica, z równym rozmiarem kolumn niezależnie od rozmiaru poszczególnych treści.
Z drugiej strony Flexbox jest idealny, gdy potrzebujesz bardziej elastycznego systemu opartego na wewnętrznym wymiarowaniu elementów.
