Raziščite razlike med temi sodobnimi metodami postavitve CSS s praktičnim problemom: poravnajte stolpce.
Ko gre za postavitve CSS, sta vam na voljo dve glavni orodji Grid in Flexbox. Čeprav sta oba izjemna pri ustvarjanju postavitev, služita različnim namenom ter imata različne prednosti in slabosti.
Naučite se, kako se obnašata oba načina postavitve in kdaj uporabiti enega namesto drugega.
Različno vedenje CSS Flexbox in Grid
Za pomoč pri vizualizaciji stvari ustvarite index.html datoteko v želeno mapo in prilepite naslednje oznake:
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>
Oba diva vsebujeta popolnoma iste podrejene elemente, tako da lahko za vsakega uporabite drugačen sistem in ju primerjate.
Vidite lahko tudi, da HTML uvozi datoteko slogovnega lista z imenom style.css. Ustvari to datoteko v isti mapi kot index.html in vanj prilepite naslednje sloge:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Vaša stran bi morala izgledati takole:
Zdaj, da obrnem prvo v stolpec flex preprosto dodajte naslednjo kodo v svoj slogovni list:
.flex-container {
display: flex;
}
To je rezultat:
The flex-posoda div zdaj postavi svoje podrejene elemente v stolpce. Ti stolpci so prilagodljivi in odzivni – prilagodijo svojo širino glede na prostor, ki je na voljo v vidnem polju. To vedenje je eno glavnih osnovni koncepti Flexboxa.
Da preprečite prepolne stolpce v flex-posoda, lahko uporabite flex-ovitek lastnina:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Če ni dovolj prostora, da bi se podrejeni elementi prilegali eni vrstici, se bodo zdaj ovili in nadaljevali v naslednji.
Zdaj uporabite postavitev mreže za drugo z uporabo tega CSS:
.grid-container {
display: grid;
}
Samo z zgornjo deklaracijo se ne bo zgodilo nič, ker privzeto vedenje Grida ustvarja vrstice, ki se nalagajo ena na drugo.
Če želite preklopiti na prikaz stolpcev, morate spremeniti grid-auto-flow lastnina (kar je vrstica privzeto):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Zdaj je rezultat:
Če želite določiti natančno število stolpcev, ki jih želite v vsaki vrstici, uporabite mreža-predloga-stolpci:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Ta vrednost ustvari pet enako širokih stolpcev. Če želite doseči podobno vedenje kot Flexbox, lahko uporabite odzivne lastnosti, kot je samodejno prilagajanje in min-max:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Pogosto boste slišali, da se Flexbox in Grid imenujeta enodimenzionalni oziroma dvodimenzionalni. Vendar to ni popolna resnica, saj lahko tako Flexbox kot Grid ustvarita dvodimenzionalni sistem postavitve. Samo to počnejo na različne načine, z različnimi omejitvami.
Najpomembnejši je način, kako lahko nadzirate enodimenzionalni vidik postavitve. Razmislite o naslednji sliki, na primer:
Opazujte, kako dosleden je stolpec Grid in kako neenakomeren je vsak stolpec v Flexboxu. Vsaka vrstica/stolpec v vsebniku flex je neodvisen drug od drugega. Tako so lahko nekateri večji od drugih, odvisno od velikosti njihove vsebine. Ti so manj podobni stolpcem in bolj podobni neodvisnim blokom.
Mreža deluje drugače, tako da nastavite 2D mrežo s privzeto zaklenjenimi stolpci. Stolpec s kratkim besedilom bo enake velikosti kot stolpec z veliko daljšim besedilom, kot prikazuje zgornja slika.
Če povzamemo, CSS Grid je nekoliko bolj strukturiran, medtem ko je Flexbox bolj strukturiran prilagodljiv in odziven sistem postavitve. Ti alternativni sistemi postavitve so dobro imenovani!
Kdaj uporabiti Flexbox
Ali se želite zanesti na lastno velikost vsakega stolpca/vrstice, kot je določeno z njihovo vsebino? Ali pa želite imeti strukturiran nadzor z vidika staršev? Če je vaš odgovor prvi, potem je Flexbox odlična rešitev za vas.
Za prikaz tega razmislite o horizontalnem navigacijskem meniju. Zamenjajte oznako znotraj oznake s tem:
<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>
Zamenjajte oznako v datoteki CSS s tem:
.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;
}
Tukaj je rezultat:
Zdaj spremenite prvo navigacijo v prilagodljivo postavitev in drugo v mrežno postavitev tako, da dodate naslednji 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));
}
Primerjajte rezultate in ugotovite, kateri je bil bolj primeren:
Iz zgornje slike lahko vidite, da je Flexbox odlična rešitev v tem primeru. Imate elemente, ki jih želite postaviti drug poleg drugega in ohraniti njihovo notranjo velikost (velike ali majhne, odvisno od dolžine besedila). Pri mreži ima vsaka celica fiksno širino in ni videti tako dobro – vsaj s povezavami z navadnim besedilom.
Kdaj uporabiti mrežo CSS
En kraj, kjer je Grid res odličen, je, ko želite iz nadrejenega ustvariti tog sistem. Primer je niz elementov kartic, ki morajo biti enako široki, tudi če vsebujejo različne količine vsebine.
Zamenjajte oznako znotraj oznake s tem:
<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>
Dodajte ta CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Začnete z zaslonom Flexbox, da vidite, kako izgleda, da ga lahko primerjate z mrežnim zaslonom. Tukaj je rezultat:
Opazite, kako je zadnji stolpec večji od drugih zaradi svoje notranje velikosti, s čimer Flexbox dobro obvlada. Toda, da bi bile enake širine z uporabo Flexboxa, bi morali iti v nasprotju s to notranjo velikostjo in dodati naslednje:
.columns > * {
flex: 1;
}
To je trik. Toda Grid je bolj primeren za takšne primere. Samo določite število stolpcev in že ste pripravljeni:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Tukaj je rezultat:
Druga prednost uporabe mreže je, da starš nadzoruje postavitev otrok. Tako lahko dodajate in odstranjujete podrejene elemente, ne da bi vas skrbelo, da bi pokvarili postavitev.
Kdaj torej uporabiti Grid ali Flexbox?
Če povzamemo, mreža CSS je odlična, če želite strukturiran nadzor z vidika nadrejenega, z enako velikostjo stolpcev ne glede na velikost posamezne vsebine.
Po drugi strani pa je Flexbox idealen, ko želite bolj prilagodljiv sistem, ki temelji na intrinzičnem dimenzioniranju elementov.