Tutustu näiden nykyaikaisten CSS-asettelumenetelmien eroihin käytännön ongelmalla: sarakkeiden rivittäminen.
Mitä tulee CSS-asetteluihin, käytettävissäsi olevat kaksi päätyökalua ovat Grid ja Flexbox. Vaikka molemmat ovat mahtavia luomaan asetteluja, ne palvelevat eri tarkoituksia ja niillä on erilaisia vahvuuksia ja heikkouksia.
Opi, miten molemmat asettelumenetelmät toimivat ja milloin niitä tulee käyttää toistensa päälle.
CSS Flexboxin ja Gridin erilainen käyttäytyminen
Auta visualisoimaan asioita luomalla index.html tiedosto haluamaasi kansioon ja liitä seuraavat merkinnät:
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>
Molemmat divit sisältävät täsmälleen samat alat, joten voit käyttää eri järjestelmää kuhunkin ja verrata niitä.
Voit myös nähdä, että HTML tuo tyylisivutiedoston nimeltä tyyli.css. Luo tämä tiedosto samaan kansioon kuin index.html ja liitä siihen seuraavat tyylit:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Sivusi pitäisi näyttää tältä:
Nyt käännä ensimmäinen flex-sarakkeeseen, lisää vain seuraava koodi tyylisivullesi:
.flex-container {
display: flex;
}
Tämä on tulos:
The flex-säiliö div asettaa nyt alielementtinsä sarakkeisiin. Nämä sarakkeet ovat joustavia ja responsiivisia – ne mukauttavat leveytensä kuvaportissa käytettävissä olevan tilan perusteella. Tämä käyttäytyminen on yksi tärkeimmistä peruskäsitteet Flexboxin takana.
Estääksesi sarakkeiden ylivuodon flex-säiliö, voit käyttää flex-wrap omaisuus:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Jos alatason elementeille ei ole tarpeeksi tilaa yhdelle riville, ne kiertävät nyt ja jatkavat seuraavalla.
Käytä nyt ruudukkoasettelua toiseen käyttämällä tätä CSS: ää:
.grid-container {
display: grid;
}
Pelkästään yllä olevalla ilmoituksella ei tapahdu mitään, koska Gridin oletuskäyttäytyminen luo rivejä, jotka pinoutuvat päällekkäin.
Jos haluat vaihtaa sarakenäyttöön, sinun on muutettava grid-auto-flow omaisuutta (joka on rivi oletuksena):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Tässä nyt tulos:
Voit määrittää kullekin riville haluamasi sarakkeiden tarkan määrän käyttämällä ruudukko-malli-sarakkeet:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Tämä arvo luo viisi yhtä leveää saraketta. Jos haluat saada Flexboxin kaltaisen käärimiskäyttäytymisen, voit käyttää reagoivia ominaisuuksia, kuten automaattinen sovitus ja min-max:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Kuulet usein, että Flexboxia ja Gridiä kutsutaan yksiulotteiseksi ja kaksiulotteiseksi. Se ei kuitenkaan ole koko totuus, koska sekä Flexbox että Grid voivat tehdä a kaksiulotteinen asettelujärjestelmä. He vain tekevät sen eri tavoilla, erilaisin rajoituksin.
Tärkeintä on tapa, jolla voit hallita asettelun yksiulotteista osaa. Harkitse esimerkiksi seuraavaa kuvaa:
Tarkkaile, kuinka johdonmukainen Grid-sarake on ja kuinka epätasainen jokainen Flexboxin sarake on. Jokainen rivi/sarake joustavassa säiliössä on riippumaton toisistaan. Joten jotkut voivat olla suurempia kuin toiset, riippuen niiden sisällön koosta. Nämä ovat vähemmän sarakkeita ja enemmän itsenäisiä lohkoja.
Ruudukko toimii eri tavalla määrittämällä 2D-ruudukon, jossa sarakkeet on lukittu oletuksena. Lyhyen tekstin sarake on samankokoinen kuin paljon pidempää tekstiä sisältävä sarake, kuten yllä oleva kuva osoittaa.
Yhteenvetona voidaan todeta, että CSS Grid on hieman jäsennellympi, kun taas Flexbox on enemmän joustava ja reagoiva asettelujärjestelmä. Nämä vaihtoehtoiset asettelujärjestelmät ovat hyvin nimettyjä!
Milloin Flexboxia kannattaa käyttää
Haluatko luottaa kunkin sarakkeen/rivin sisäiseen kokoon niiden sisällön määrittelemänä? Vai haluatko strukturoidun ohjauksen vanhemman näkökulmasta? Jos vastauksesi on ensimmäinen, Flexbox on täydellinen ratkaisu sinulle.
Tämän osoittamiseksi harkitse vaakasuuntaista navigointivalikkoa. Korvaa merkinnän sisällä tagit tällä:
<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>
Korvaa CSS-tiedoston merkintä tällä:
.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;
}
Tässä tulos:
Muuta nyt ensimmäinen navigointi joustavaksi asetteluksi ja toinen ruudukkoasetteluksi lisäämällä seuraava 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));
}
Vertaa tuloksia nähdäksesi kumpi oli sopivampi:
Yllä olevasta kuvasta näet, että Flexbox on täydellinen ratkaisu tässä tapauksessa. Sinulla on kohteita, jotka haluat asettaa vierekkäin ja säilyttää niiden luontaisen koon (iso tai pieni tekstin pituudesta riippuen). Ruudukkoa käytettäessä jokaisella solulla on kiinteä leveys, eikä se näytä yhtä hyvältä – ainakaan pelkillä tekstilinkeillä.
Milloin CSS-ruudukkoa kannattaa käyttää
Yksi paikka, jossa Grid todella loistaa, on silloin, kun haluat luoda vanhemman järjestelmän. Esimerkki on joukko korttielementtejä, joiden tulee olla yhtä leveitä, vaikka ne sisältäisivät eri määriä sisältöä.
Vaihda merkinnän sisällä tagit tällä:
<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>
Lisää tämä CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Aloitat Flexbox-näytöstä nähdäksesi, miltä se näyttää, jotta voit verrata sitä ruudukkonäyttöön. Tässä tulos:
Huomaa, kuinka viimeinen sarake on suurempi kuin muut sen sisäisen koon ansiosta, jota Flexbox käsittelee hyvin. Mutta jos haluat tehdä niistä saman leveyden Flexboxilla, sinun on vastustettava tätä luontaista kokoa lisäämällä seuraava:
.columns > * {
flex: 1;
}
Tämä tekee tempun. Mutta Grid sopii paremmin tällaisiin tapauksiin. Määrität vain sarakkeiden lukumäärän, ja olet valmis:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Tässä tulos:
Toinen Gridin käytön etu on, että vanhempi hallitsee lasten ulkoasua. Voit siis lisätä ja poistaa alatason elementtejä murehtimatta asettelun rikkomisesta.
Joten milloin sinun pitäisi käyttää Gridiä tai Flexboxia?
Yhteenvetona voidaan todeta, että CSS Grid on loistava, kun haluat strukturoidun ohjausobjektin ylätason näkökulmasta, ja sarakkeiden koko on yhtä suuri riippumatta sen yksittäisen sisällön koosta.
Flexbox puolestaan on ihanteellinen, kun haluat joustavamman järjestelmän, joka perustuu elementtien sisäiseen mitoitukseen.