Preskúmajte rozdiely medzi týmito modernými metódami rozloženia CSS pomocou praktického problému: zoraďovanie stĺpcov.
Pokiaľ ide o rozloženia CSS, dva hlavné nástroje, ktoré máte k dispozícii, sú Grid a Flexbox. Aj keď sú obe úžasné pri vytváraní rozložení, slúžia na rôzne účely a majú rôzne silné a slabé stránky.
Zistite, ako sa správajú obe metódy rozloženia a kedy použiť jednu cez druhú.
Odlišné správanie CSS Flexbox a Grid
Ak chcete pomôcť vizualizovať veci, vytvorte index.html súbor do preferovaného priečinka a prilepte ho s nasledujúcim označením:
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>
Obidve divy obsahujú presne tie isté deti, takže na každé môžete použiť iný systém a porovnať ich.
Môžete tiež vidieť, že HTML importuje súbor šablóny štýlov s názvom style.css. Vytvorte tento súbor v rovnakom priečinku ako index.html a vložte do nej nasledujúce štýly:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Vaša stránka by mala vyzerať takto:
Teraz otočiť prvý do flexibilného stĺpca jednoducho pridajte nasledujúci kód do svojej šablóny štýlov:
.flex-container {
display: flex;
}
Toto je výsledok:
The flex-kontajner div teraz rozloží svoje podradené prvky do stĺpcov. Tieto stĺpce sú flexibilné a reagujú – svoju šírku prispôsobujú priestoru dostupnému vo výreze. Toto správanie je jedným z hlavných základné koncepty Flexboxu.
Aby sa predišlo preplneniu kolón v flex-kontajner, môžete použiť flex-balenie nehnuteľnosť:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Ak nie je dostatok miesta na to, aby sa podradené prvky zmestili na jeden riadok, teraz sa zalomia a pokračujú na ďalšom.
Teraz použite rozloženie mriežky na druhú pomocou tohto CSS:
.grid-container {
display: grid;
}
Iba s vyššie uvedenou deklaráciou sa nič nestane, pretože predvolené správanie mriežky vytvára riadky, ktoré sa ukladajú na seba.
Ak chcete prepnúť na stĺpcové zobrazenie, musíte zmeniť grid-auto-flow majetok (čo je riadok predvolene):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Teraz je tu výsledok:
Ak chcete zadať presný počet stĺpcov, ktoré chcete na každom riadku použiť, použite mriežka-šablóna-stĺpce:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Táto hodnota vytvorí päť stĺpcov rovnakej šírky. Ak chcete získať správanie zalamovania podobné Flexboxu, môžete použiť responzívne vlastnosti, ako napr automatické prispôsobenie a min-max:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Často budete počuť, ako sa Flexbox a Grid označujú ako jednorozmerné a dvojrozmerné. To však nie je úplná pravda, pretože Flexbox aj Grid dokážu vytvoriť a dvojrozmerný systém rozloženia. Len to robia rôznymi spôsobmi, s rôznymi obmedzeniami.
Najdôležitejší je spôsob, akým môžete ovládať jednorozmerný aspekt rozloženia. Zvážte napríklad nasledujúci obrázok:
Pozorujte, ako konzistentný je stĺpec Mriežka a aký nerovnomerný je každý stĺpec vo Flexboxe. Každý riadok/stĺpec vo flexibilnom kontajneri je nezávislý od druhého. Takže niektoré môžu byť väčšie ako iné, v závislosti od veľkosti ich obsahu. Sú to menej ako stĺpce a viac ako nezávislé bloky.
Mriežka funguje odlišne nastavením 2D mriežky so stĺpcami, ktoré sú predvolene uzamknuté. Stĺpec s krátkym textom bude mať rovnakú veľkosť ako stĺpec s oveľa dlhším textom, ako ukazuje obrázok vyššie.
Stručne povedané, CSS Grid je o niečo viac štruktúrovaný, zatiaľ čo Flexbox je viac flexibilný a citlivý systém rozloženia. Tieto alternatívne systémy usporiadania sú dobre pomenované!
Kedy použiť Flexbox
Chcete sa spoľahnúť na vnútornú veľkosť každého stĺpca/riadku, ako je definované ich obsahom? Alebo chcete mať štruktúrovanú kontrolu z pohľadu rodiča? Ak je vaša odpoveď prvá, potom je pre vás Flexbox dokonalým riešením.
Aby ste to demonštrovali, zvážte horizontálnu navigačnú ponuku. Nahradiť označenie v rámci značky s týmto:
<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>
Nahraďte označenie v súbore CSS týmto:
.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;
}
Tu je výsledok:
Teraz premeňte prvú navigáciu na flexibilné rozloženie a druhú na rozloženie mriežky pridaním nasledujúceho 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));
}
Porovnajte výsledky a zistite, ktorý z nich bol vhodnejší:
Z vyššie uvedeného obrázku môžete vidieť, že Flexbox je v tomto prípade dokonalým riešením. Máte položky, ktoré chcete umiestniť vedľa seba a zachovať ich vnútornú veľkosť (veľkú alebo malú v závislosti od dĺžky textu). S mriežkou má každá bunka pevnú šírku a nevyzerá to tak dobre – aspoň s odkazmi na obyčajný text.
Kedy použiť mriežku CSS
Jedným z miest, kde Grid skutočne vyniká, je, keď chcete vytvoriť pevný systém z rodiča. Príkladom je súbor prvkov karty, ktoré by mali byť rovnako široké, aj keď obsahujú rôzne množstvá obsahu.
Nahraďte označenie vo vnútri značky s týmto:
<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>
Pridajte tento CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Začínate s displejom Flexbox, aby ste videli, ako vyzerá, aby ste ho mohli porovnať s mriežkovým displejom. Tu je výstup:
Všimnite si, ako je posledný stĺpec väčší ako ostatné kvôli svojej vnútornej veľkosti, čo Flexbox dobre zvláda. Aby však mali rovnakú šírku pomocou Flexboxu, museli by ste ísť proti tejto vnútornej veľkosti pridaním nasledujúceho:
.columns > * {
flex: 1;
}
Toto robí trik. Grid je však vhodnejší pre prípady, ako je tento. Stačí zadať počet stĺpcov a môžete začať:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Tu je výsledok:
Ďalšou výhodou používania Gridu je, že rodič ovláda rozloženie detí. Takže môžete pridávať a odstraňovať podradené prvky bez obáv z narušenia rozloženia.
Kedy by ste teda mali použiť Grid alebo Flexbox?
Stručne povedané, CSS Grid je skvelý, keď chcete štruktúrovaný ovládací prvok z pohľadu rodiča s rovnakou veľkosťou stĺpcov bez ohľadu na veľkosť jeho jednotlivých obsahov.
Flexbox je na druhej strane ideálny, keď chcete flexibilnejší systém založený na vnútornom dimenzovaní prvkov.
