Ištirkite šių šiuolaikinių CSS išdėstymo metodų skirtumus su praktine problema: stulpelių išdėstymu.
Kalbant apie CSS maketus, du pagrindiniai jūsų turimi įrankiai yra „Grid“ ir „Flexbox“. Nors abu puikiai kuria maketus, jie tarnauja skirtingiems tikslams ir turi skirtingas stipriąsias ir silpnąsias puses.
Sužinokite, kaip veikia abu išdėstymo metodai ir kada naudoti vieną prieš kitą.
Skirtingas CSS Flexbox ir Grid elgesys
Norėdami padėti vizualizuoti dalykus, sukurkite index.html failą į pageidaujamą aplanką ir įklijuokite šį žymėjimą:
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>
Abiejuose divuose yra lygiai tokie patys vaikai, todėl kiekvienam galite taikyti skirtingą sistemą ir juos palyginti.
Taip pat galite matyti, kad HTML importuoja stiliaus lapo failą pavadinimu stilius.css. Sukurkite šį failą tame pačiame aplanke kaip index.html ir įklijuokite šiuos stilius:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Jūsų puslapis turėtų atrodyti taip:
Dabar pasuksime pirmąjį į lanksčią stulpelį, tiesiog pridėkite šį kodą į savo stiliaus lapą:
.flex-container {
display: flex;
}
Štai rezultatas:
The lankstus konteineris Div dabar savo antrinius elementus išdėsto stulpeliuose. Šie stulpeliai yra lankstūs ir jautrūs – jie pritaiko savo plotį pagal laisvą vietą peržiūros srityje. Toks elgesys yra vienas pagrindinių pagrindinės „Flexbox“ sąvokos.
Kad išvengtumėte stulpelių perpildymo lankstus konteineris, galite naudoti lankstus įvyniojimas nuosavybė:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Jei antriniams elementams neužtenka vietos, kad tilptų vienoje eilutėje, jie dabar apsivynios ir tęs kitą.
Dabar antrajam pritaikykite tinklelio išdėstymą naudojant šį CSS:
.grid-container {
display: grid;
}
Nieko neatsitiks vien su aukščiau pateikta deklaracija, nes numatytasis Grid veikimas sukuria eilutes, kurios sukraunamos viena ant kitos.
Norėdami perjungti į stulpelio rodymą, turite pakeisti tinklelis-automatinis srautas nuosavybė (tai yra eilė pagal numatytuosius nustatymus):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Dabar štai rezultatas:
Norėdami nurodyti tikslų stulpelių skaičių kiekvienoje eilutėje, naudokite tinklelis-šablonas-stulpeliai:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Ši vertė sukuria penkis vienodo pločio stulpelius. Jei norite, kad įvyniojimas būtų panašus į „Flexbox“, galite naudoti reaguojančias savybes, pvz automatinis pritaikymas ir min-maks:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Dažnai girdėsite, kad „Flexbox“ ir „Grid“ yra atitinkamai vadinami vienmačiu ir dvimačiu. Tačiau tai nėra visa tiesa, nes tiek „Flexbox“, tiek „Grid“ gali padaryti a dvimatė išdėstymo sistema. Jie tiesiog tai daro skirtingais būdais, su skirtingais apribojimais.
Svarbiausia yra tai, kaip galite valdyti vienmatį išdėstymo aspektą. Apsvarstykite, pavyzdžiui, tokį vaizdą:
Stebėkite, koks nuoseklus yra tinklelio stulpelis ir koks nelygus yra kiekvienas Flexbox stulpelis. Kiekviena lankstaus konteinerio eilutė / stulpelis nepriklauso nuo kito. Taigi kai kurie gali būti didesni už kitus, atsižvelgiant į jų turinio dydį. Tai mažiau kaip stulpeliai ir labiau nepriklausomi blokai.
Tinklelis veikia kitaip, nustatant 2D tinklelį su stulpeliais, užrakintais pagal numatytuosius nustatymus. Stulpelis su trumpu tekstu bus tokio pat dydžio kaip ir su daug ilgesniu tekstu, kaip parodyta aukščiau pateiktame paveikslėlyje.
Apibendrinant, CSS tinklelis yra šiek tiek labiau struktūrizuotas, o „Flexbox“ yra daugiau lanksti ir reaguojanti išdėstymo sistema. Šios alternatyvios išdėstymo sistemos yra gerai pavadintos!
Kada naudoti „Flexbox“.
Ar norite pasikliauti kiekvieno stulpelio / eilutės dydžiu, kaip apibrėžta jų turinyje? O gal norite turėti struktūrinę kontrolę iš tėvų perspektyvos? Jei jūsų atsakymas yra pirmasis, tada „Flexbox“ yra puikus sprendimas jums.
Norėdami tai parodyti, apsvarstykite horizontalų naršymo meniu. Pakeiskite žymėjimą viduje žymės su šiuo:
<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>
Pakeiskite žymėjimą CSS faile šiuo:
.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;
}
Štai rezultatas:
Dabar pakeiskite pirmąjį naršymą į lankstų išdėstymą, o antrąjį į tinklelio išdėstymą pridėdami šį 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));
}
Palyginkite rezultatus, kad sužinotumėte, kuris buvo tinkamesnis:
Iš aukščiau esančio paveikslėlio matote, kad šiuo atveju „Flexbox“ yra puikus sprendimas. Turite elementus, kuriuos norite dėti vienas šalia kito ir išlaikyti jiems būdingą dydį (didelį arba mažą, atsižvelgiant į teksto ilgį). Naudojant tinklelį, kiekvienas langelis yra fiksuoto pločio ir atrodo ne taip gerai – bent jau su paprasto teksto nuorodomis.
Kada naudoti CSS tinklelį
Viena vieta, kur „Grid“ tikrai išsiskiria, yra tada, kai norite sukurti nelanksčią sistemą iš pagrindinės sistemos. Pavyzdys yra kortelės elementų rinkinys, kuris turėtų būti vienodai platus, net jei juose yra skirtingas turinio kiekis.
Pakeiskite žymėjimą viduje žymės su šiuo:
<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>
Pridėti šį CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Pradedate nuo „Flexbox“ ekrano, kad pamatytumėte, kaip jis atrodo, kad galėtumėte palyginti jį su tinklelio ekranu. Štai išvestis:
Atkreipkite dėmesį, kad paskutinis stulpelis yra didesnis nei kiti dėl savo paties dydžio, kurį „Flexbox“ puikiai valdo. Tačiau norėdami, kad jie būtų vienodo pločio naudodami „Flexbox“, turėtumėte prieštarauti šiam būdingam dydžiui, pridėdami:
.columns > * {
flex: 1;
}
Tai daro triuką. Tačiau „Grid“ geriau tinka tokiems atvejams. Jūs tiesiog nurodote stulpelių skaičių ir galite pradėti:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Štai rezultatas:
Kitas „Grid“ naudojimo pranašumas yra tas, kad tėvai kontroliuoja vaikų išdėstymą. Taigi galite pridėti ir pašalinti antrinius elementus nesijaudindami, kad sugadinsite išdėstymą.
Taigi, kada turėtumėte naudoti tinklelį arba „Flexbox“?
Apibendrinant galima pasakyti, kad CSS tinklelis yra puikus, kai norite struktūrinio valdymo elemento, kurio stulpeliai būtų vienodo dydžio, nepaisant atskiro turinio dydžio.
Kita vertus, „Flexbox“ idealiai tinka, kai norite lankstesnės sistemos, pagrįstos vidiniu elementų dydžiu.
