Uurige nende kaasaegsete CSS-i paigutusmeetodite erinevusi praktilise probleemiga: veergude joondamine.

CSS-i paigutuste osas on teie käsutuses kaks peamist tööriista Grid ja Flexbox. Kuigi mõlemad on paigutuste loomisel suurepärased, teenivad nad erinevaid eesmärke ning neil on erinevad tugevused ja nõrkused.

Siit saate teada, kuidas mõlemad küljendusmeetodid käituvad ja millal üht teist kasutada.

CSS Flexboxi ja Gridi erinev käitumine

Asjade visualiseerimiseks looge an index.html fail oma eelistatud kausta ja kleepige järgmine märgistus:

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>





instagram viewer

<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>

Mõlemad divisjonid sisaldavad täpselt samu lapsi, nii et saate mõlema jaoks rakendada erinevat süsteemi ja neid võrrelda.

Samuti näete, et HTML impordib stiililehe faili nimega stiil.css. Looge see fail samasse kausta kui index.html ja kleepige sellesse järgmised stiilid:

body {
padding: 30px;
}
h1 {
color: #A52A2A;
}


h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}

Teie leht peaks välja nägema selline:

Nüüd, et pöörata esimene painduvasse veergu lisage lihtsalt oma stiililehele järgmine kood:

.flex-container {
display: flex;
}

See on tulemus:

The painduv konteiner div paigutab nüüd oma alamelemendid veergudesse. Need veerud on paindlikud ja reageerivad – nad kohandavad oma laiust vastavalt vaateaknas saadaolevale ruumile. Selline käitumine on üks peamisi Flexboxi põhikontseptsioonid.

Veergude ületäitumise vältimiseks painduv konteiner, saate kasutada flex-wrap vara:

.flex-container {
display: flex;
flex-wrap: wrap;
}

Kui alamelementide ühele reale mahutamiseks ei ole piisavalt ruumi, kerivad need nüüd ümber ja jätkavad järgmisel.

Nüüd rakendage teisele ruudustiku paigutust kasutades seda CSS-i:

.grid-container {
display: grid;
}

Ainuüksi ülaltoodud deklaratsiooniga ei juhtu midagi, sest Gridi vaikekäitumine loob read, mis virnatakse üksteise peale.

Veerukuvale lülitumiseks peate muutma grid-auto-flow vara (mis on rida algselt):

.grid-container {
display: grid;
grid-auto-flow: column;
}

Nüüd on tulemus siin:

Igal real soovitud veergude täpse arvu määramiseks kasutage ruudustik-mall-veerud:

.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}

See väärtus loob viis võrdse laiusega veergu. Flexboxiga sarnase mähkimiskäitumise saavutamiseks võite kasutada reageerivaid omadusi, nagu automaatne sobivus ja min-max:

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}

Sageli kuulete, et Flexbox ja Grid nimetatakse vastavalt ühe- ja kahemõõtmeliseks. See pole aga täielik tõde, sest nii Flexbox kui ka Grid võivad teha a kahemõõtmeline paigutussüsteem. Nad lihtsalt teevad seda erineval viisil, erinevate piirangutega.

Kõige olulisem on viis, kuidas saate küljenduse ühemõõtmelist aspekti juhtida. Mõelge näiteks järgmisele pildile:

Jälgige, kui ühtlane on ruudustiku veerg ja kui ebaühtlane on iga Flexboxi veerg. Iga rida/veerg painduvas konteineris on teisest sõltumatu. Seega võivad mõned olla suuremad kui teised, olenevalt nende sisu suurusest. Need on vähem nagu veerud ja pigem sõltumatud plokid.

Ruudustik töötab erinevalt, seadistades 2D-ruudustiku, mille veerud on vaikimisi lukustatud. Nagu ülaltoodud pilt näitab, on lühikese tekstiga veerg sama suur kui palju pikema tekstiga veerg.

Kokkuvõtlikult võib öelda, et CSS Grid on pisut struktureeritum, Flexbox aga rohkem paindlik ja tundlik paigutussüsteem. Need alternatiivsed paigutussüsteemid on hästi nimetatud!

Millal Flexboxi kasutada

Kas soovite tugineda iga veeru/rea sisemisele suurusele, mis on määratletud nende sisuga? Või soovite struktureeritud kontrolli vanema vaatenurgast? Kui teie vastus on esimene, on Flexbox teie jaoks ideaalne lahendus.

Selle demonstreerimiseks kaaluge horisontaalset navigeerimismenüüd. Asendage märgistus sildid sellega:

<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>

Asendage CSS-faili märgistus järgmisega:

.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;
}

Siin on tulemus:

Nüüd muutke esimene navigeerimine paindlikuks paigutuseks ja teine ​​ruudustikupaigutuseks, lisades järgmise CSS-i:

.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Võrrelge tulemusi, et näha, milline neist oli sobivam:

Ülaltoodud pildilt näete, et Flexbox on antud juhul ideaalne lahendus. Teil on üksusi, mida soovite kõrvuti paigutada ja säilitada nende olemusliku suuruse (suured või väikesed, olenevalt teksti pikkusest). Gridi puhul on igal lahtril fikseeritud laius ja see ei näe nii hea välja – vähemalt lihtteksti linkidega.

Millal kasutada CSS-võrku

Üks koht, kus Grid on tõesti suurepärane, on see, kui soovite luua vanemast jäiga süsteemi. Näitena võib tuua kaardielementide komplekti, mis peaksid olema võrdselt laiad, isegi kui need sisaldavad erinevas koguses sisu.

Asendage sees olev märgistus sildid sellega:

<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>

Lisage see CSS:

.columns {
display: flex;
gap: 1em;
}
article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}

Alustate Flexboxi ekraaniga, et näha, kuidas see välja näeb, et saaksite seda võrrelda ruudustikuga. Siin on väljund:

Pange tähele, kuidas viimane veerg on oma olemusliku suuruse tõttu teistest suurem, millega Flexbox hästi hakkama saab. Kuid selleks, et muuta need Flexboxi abil sama laiusega, peaksite selle olemusliku suuruse vastu minema, lisades järgmise:

.columns > * {
flex: 1;
}

See ajab asja ära. Kuid Grid sobib sellisteks juhtumiteks paremini. Määrate lihtsalt veergude arvu ja oletegi valmis:

.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}

Siin on tulemus:

Gridi kasutamise eeliseks on ka see, et vanem kontrollib laste paigutust. Nii saate lisada ja eemaldada alamelemente, muretsemata paigutuse purunemise pärast.

Niisiis, millal peaksite kasutama võrku või Flexboxi?

Kokkuvõtteks võib öelda, et CSS Grid on suurepärane, kui soovite vanema vaatenurgast struktureeritud juhtelementi, mille veergude suurus on võrdne, olenemata selle individuaalse sisu suurusest.

Flexbox on seevastu ideaalne, kui soovite paindlikumat süsteemi, mis põhineb elementide olemuslikul suurusel.