Udforsk forskellene mellem disse moderne CSS-layoutmetoder med et praktisk problem: opstilling af kolonner.
Når det kommer til CSS-layouts, er de to vigtigste værktøjer til din rådighed Grid og Flexbox. Selvom begge er fantastiske til at skabe layouts, tjener de forskellige formål og har forskellige styrker og svagheder.
Lær, hvordan begge layoutmetoder opfører sig, og hvornår du skal bruge den ene frem for den anden.
Den anderledes opførsel af CSS Flexbox og Grid
For at hjælpe med at visualisere ting skal du oprette en index.html fil i din foretrukne mappe og indsæt følgende markup:
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>
Begge div'er indeholder nøjagtig de samme børn, så du kan anvende et andet system til hver og sammenligne dem.
Du kan også se, at HTML importerer en stilarksfil med navnet style.css. Opret denne fil i samme mappe som index.html og indsæt følgende stilarter i det:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Din side skal se sådan ud:
Nu for at vende den første i en flex kolonne, skal du blot tilføje følgende kode til dit typografiark:
.flex-container {
display: flex;
}
Dette er resultatet:
Det flex-beholder div lægger nu sine underordnede elementer ud i kolonner. Disse søjler er fleksible og responsive – de tilpasser deres bredde baseret på den tilgængelige plads i visningsporten. Denne adfærd er en af de vigtigste grundlæggende koncepter bag Flexbox.
For at forhindre overfyldte søjler i flex-beholder, kan du bruge flex-indpakning ejendom:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Hvis der ikke er plads nok til, at de underordnede elementer kan passe på én linje, vil de nu pakkes rundt og fortsætte på den næste.
Anvend nu et gitterlayout på den anden bruger denne CSS:
.grid-container {
display: grid;
}
Der vil ikke ske noget med ovenstående erklæring alene, fordi standardadfærden for Grid skaber rækker, der stables oven på hinanden.
For at skifte til en kolonnevisning skal du ændre gitter-auto-flow ejendom (som er række som standard):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Nu er resultatet her:
For at angive det nøjagtige antal kolonner, du ønsker på hver linje, skal du bruge gitter-skabelon-kolonner:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Denne værdi opretter fem kolonner med samme bredde. For at få en indpakningsadfærd, der ligner Flexbox, kan du bruge responsive egenskaber som f.eks auto-tilpasning og min-max:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Du vil ofte høre Flexbox og Grid omtalt som henholdsvis endimensionel og todimensionel. Det er dog ikke den fulde sandhed, for både Flexbox og Grid kan lave en todimensionelt layoutsystem. De gør det bare på forskellige måder, med forskellige begrænsninger.
Det vigtigste er måden, hvorpå du kan kontrollere det endimensionelle aspekt af layoutet. Overvej for eksempel følgende billede:
Se, hvor ensartet Grid-kolonnen er, og hvor ujævn hver kolonne i Flexbox er. Hver række/søjle i en flexbeholder er uafhængig af den anden. Så nogle kan være større end andre, afhængigt af størrelsen på deres indhold. Disse er mindre som kolonner og mere som uafhængige blokke.
Grid fungerer anderledes ved at opsætte et 2D-gitter med kolonner låst som standard. En kolonne med kort tekst vil have samme størrelse som en med meget længere tekst, som ovenstående billede viser.
Sammenfattende er CSS Grid en lille smule mere struktureret, mens Flexbox er en mere fleksibelt og responsivt layoutsystem. Disse alternative layoutsystemer er velnavngivne!
Hvornår skal man bruge Flexbox
Vil du stole på den iboende størrelse af hver kolonne/række, som defineret af deres indhold? Eller vil du have struktureret kontrol fra forældrenes perspektiv? Hvis dit svar er det første, så er Flexbox den perfekte løsning for dig.
For at demonstrere dette, overvej en vandret navigationsmenu. Udskift markeringen i tags med dette:
<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>
Erstat markeringen i CSS-filen med denne:
.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;
}
Her er resultatet:
Nu skal du transformere den første navigation til et fleksibelt layout og den anden til et gitterlayout ved at tilføje følgende 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));
}
Sammenlign resultaterne for at se, hvilken der var mere egnet:
Fra ovenstående billede kan du se, at Flexbox er den perfekte løsning i dette tilfælde. Du har genstande, som du vil have ved siden af hinanden og bevare deres iboende størrelse (stor eller lille afhængig af tekstlængden). Med Grid har hver celle en fast bredde, og det ser ikke så godt ud – i det mindste med almindelige tekstlinks.
Hvornår skal man bruge CSS Grid
Et sted, hvor Grid virkelig udmærker sig, er, når du vil skabe et stift system fra forælderen. Et eksempel er et sæt kortelementer, der skal være lige store, selvom de indeholder forskellige mængder indhold.
Udskift markeringen inde i tags med dette:
<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>
Tilføj denne CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Du starter med en Flexbox-skærm for at se, hvordan den ser ud, så du kan sammenligne den med gitterskærmen. Her er outputtet:
Læg mærke til, hvordan den sidste kolonne er større end andre på grund af dens iboende størrelse, hvilket er, hvad Flexbox håndterer godt. Men for at gøre dem til samme bredde ved hjælp af Flexbox, skal du gå imod den iboende størrelse ved at tilføje følgende:
.columns > * {
flex: 1;
}
Dette gør tricket. Men Grid er bedre egnet til tilfælde som dette. Du skal blot angive antallet af kolonner, og så er du klar:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Her er resultatet:
En anden fordel ved at bruge Grid er, at forælderen kontrollerer børnenes layout. Så du kan tilføje og fjerne underordnede elementer uden at bekymre dig om at bryde layoutet.
Så hvornår skal du bruge Grid eller Flexbox?
Sammenfattende er CSS Grid fantastisk, når du ønsker en struktureret kontrol fra forældrenes perspektiv, med samme størrelse af kolonner uanset størrelsen på dets individuelle indhold.
Flexbox er derimod ideel, når du ønsker et mere fleksibelt system baseret på elementernes iboende dimensionering.
