Izpētiet atšķirības starp šīm modernajām CSS izkārtojuma metodēm ar praktisku problēmu: kolonnu sakārtošanu.

Runājot par CSS izkārtojumiem, divi galvenie jūsu rīcībā esošie rīki ir Grid un Flexbox. Lai gan abi lieliski veido izkārtojumus, tie kalpo dažādiem mērķiem un tiem ir dažādas stiprās un vājās puses.

Uzziniet, kā darbojas abas izkārtojuma metodes un kad lietot vienu pār otru.

CSS Flexbox un Grid atšķirīgā uzvedība

Lai palīdzētu vizualizēt lietas, izveidojiet index.html failu vēlamajā mapē un ielīmējiet tālāk norādītajā marķējumā:

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>

Abos divos ir ietverti tieši tie paši atvasinājumi, lai jūs varētu katram piemērot atšķirīgu sistēmu un tos salīdzināt.

Varat arī redzēt, ka HTML importē stila lapas failu ar nosaukumu stils.css. Izveidojiet šo failu tajā pašā mapē kā index.html un ielīmējiet tajā šādus stilus:

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


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

Jūsu lapai vajadzētu izskatīties šādi:

Tagad, lai pagrieztu pirmo elastīgajā kolonnā, vienkārši pievienojiet stila lapai šādu kodu:

.flex-container {
display: flex;
}

Šis ir rezultāts:

The elastīgs konteiners Div tagad savus pakārtotos elementus izkārto kolonnās. Šīs kolonnas ir elastīgas un atsaucīgas — tās pielāgo savu platumu, ņemot vērā skatvietā pieejamo vietu. Šī uzvedība ir viena no galvenajām Flexbox pamatjēdzieni.

Lai novērstu kolonnu pārpildīšanu elastīgs konteiners, varat izmantot flex-wrap īpašums:

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

Ja bērnu elementiem nav pietiekami daudz vietas, lai tie ietilptu vienā rindā, tie tiks apvilkti un turpināsies nākamajā.

Tagad izmantojiet režģa izkārtojumu otrajam izmantojot šo CSS:

.grid-container {
display: grid;
}

Nekas nenotiks tikai ar iepriekš minēto deklarāciju, jo Grid noklusējuma darbība rada rindas, kas tiek sakrautas viena virs otras.

Lai pārslēgtos uz kolonnu displeju, ir jāmaina režģis-automātiskā plūsma īpašums (kas ir rinda pēc noklusējuma):

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

Tagad, lūk, rezultāts:

Lai norādītu precīzu vajadzīgo kolonnu skaitu katrā rindā, izmantojiet režģis-veidne-kolonnas:

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

Šī vērtība izveido piecas vienāda platuma kolonnas. Lai iegūtu Flexbox līdzīgai iesaiņošanai, varat izmantot adaptīvās īpašības, piemēram, automātiska pielāgošana un min-maks:

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

Jūs bieži dzirdēsit, ka Flexbox un Grid attiecīgi tiek dēvēti par viendimensiju un divdimensiju. Tomēr tā nav pilnīga patiesība, jo gan Flexbox, gan Grid var izveidot a divdimensiju izkārtojuma sistēma. Viņi to vienkārši dara dažādos veidos, ar dažādiem ierobežojumiem.

Vissvarīgākais ir veids, kā varat kontrolēt izkārtojuma viendimensionālo aspektu. Apsveriet, piemēram, šādu attēlu:

Ievērojiet, cik konsekventa ir režģa kolonna un cik nevienmērīga ir katra Flexbox kolonna. Katra rinda/kolonna elastīgā konteinerā ir neatkarīga no otras. Tāpēc daži var būt lielāki par citiem atkarībā no satura lieluma. Tie ir mazāk kā kolonnas un vairāk kā neatkarīgi bloki.

Režģis darbojas citādi, iestatot 2D režģi ar kolonnām, kas pēc noklusējuma ir bloķētas. Kolonna ar īsu tekstu būs tāda paša izmēra kā kolonna ar daudz garāku tekstu, kā parādīts iepriekš redzamajā attēlā.

Rezumējot, CSS Grid ir nedaudz strukturētāks, savukārt Flexbox ir vairāk elastīga un atsaucīga izkārtojuma sistēma. Šīs alternatīvās izkārtojuma sistēmas ir labi nosauktas!

Kad lietot Flexbox

Vai vēlaties paļauties uz katras kolonnas/rindas raksturīgo izmēru, ko nosaka to saturs? Vai arī vēlaties strukturētu kontroli no vecāku viedokļa? Ja jūsu atbilde ir pirmā, Flexbox ir ideāls risinājums jums.

Lai to parādītu, apsveriet horizontālās navigācijas izvēlni. Nomainiet marķējumu atzīmes ar šo:

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

Aizstāt marķējumu CSS failā ar šo:

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

Lūk, rezultāts:

Tagad pārveidojiet pirmo navigāciju elastīgā izkārtojumā un otro par režģa izkārtojumu, pievienojot šādu 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));
}

Salīdziniet rezultātus, lai redzētu, kurš bija piemērotāks:

No iepriekš redzamā attēla var redzēt, ka Flexbox ir ideāls risinājums šajā gadījumā. Jums ir vienumi, kurus vēlaties novietot vienu otram blakus un saglabāt to raksturīgo izmēru (lieli vai mazi atkarībā no teksta garuma). Izmantojot Režģi, katrai šūnai ir noteikts platums, un tā neizskatās tik labi — vismaz ar vienkārša teksta saitēm.

Kad izmantot CSS režģi

Viena vieta, kur Grid patiešām izceļas, ir tad, ja vēlaties izveidot stingru sistēmu no vecākām. Piemērs ir karšu elementu kopa, kurai jābūt vienlīdz plašam, pat ja tajos ir atšķirīgs satura daudzums.

Nomainiet marķējumu iekšpusē atzīmes ar šo:

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

Pievienojiet šo CSS:

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

Jūs sākat ar Flexbox displeju, lai redzētu, kā tas izskatās, un varat to salīdzināt ar režģa displeju. Šeit ir izvade:

Ņemiet vērā, ka pēdējā kolonna ir lielāka par citām, jo ​​tai raksturīgais izmērs ir tāds, ko Flexbox labi apstrādā. Bet, lai padarītu tos vienādu platumu, izmantojot Flexbox, jums būtu jāvēršas pret šo raksturīgo izmēru, pievienojot tālāk norādīto.

.columns > * {
flex: 1;
}

Tas padara to triku. Taču Grid ir labāk piemērots šādiem gadījumiem. Jūs vienkārši norādiet kolonnu skaitu, un jūs varat turpināt:

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

Lūk, rezultāts:

Vēl viena Režģa izmantošanas priekšrocība ir tā, ka vecāki kontrolē bērnu izkārtojumu. Tātad jūs varat pievienot un noņemt bērnu elementus, neuztraucoties par izkārtojuma pārkāpšanu.

Tātad, kad jums vajadzētu izmantot Grid vai Flexbox?

Rezumējot, CSS režģis ir lieliski piemērots, ja vēlaties strukturētu vadīklu no vecāku viedokļa ar vienāda izmēra kolonnām neatkarīgi no tā atsevišķā satura lieluma.

No otras puses, Flexbox ir ideāli piemērots, ja vēlaties elastīgāku sistēmu, kuras pamatā ir elementu raksturīgie izmēri.