Fedezze fel e modern CSS-elrendezési módszerek közötti különbségeket egy gyakorlati problémával: az oszlopok sorba rendezésével.
Ha CSS-elrendezésekről van szó, a két fő eszköz a Grid és a Flexbox. Bár mindketten nagyszerűek az elrendezések létrehozásában, más-más célt szolgálnak, és eltérő erősségekkel és gyengeségekkel rendelkeznek.
Ismerje meg, hogyan viselkedik mindkét elrendezési módszer, és mikor kell használni az egyiket a másikkal szemben.
A CSS Flexbox és Grid eltérő viselkedése
A dolgok vizualizálásához hozzon létre egy index.html fájlt a kívánt mappába, és illessze be a következő jelölést:
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>
Mindkét div pontosan ugyanazokat a gyerekeket tartalmazza, így mindegyikre eltérő rendszert alkalmazhat, és összehasonlíthatja őket.
Azt is láthatja, hogy a HTML egy elnevezésű stíluslapfájlt importál stílus.css. Hozza létre ezt a fájlt ugyanabban a mappában, mint index.html és illessze be a következő stílusokat:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Az oldalának így kell kinéznie:
Most pedig az elsőt egy flex oszlopba egyszerűen adja hozzá a következő kódot a stíluslaphoz:
.flex-container {
display: flex;
}
Ez az eredmény:
A flex-container A div most oszlopokba rendezi a gyermek elemeit. Ezek az oszlopok rugalmasak és rugalmasak – szélességüket a nézetablakban rendelkezésre álló helyhez igazítják. Ez a viselkedés az egyik fő a Flexbox mögött meghúzódó alapkoncepciók.
Az oszlopok túlcsordulásának elkerülése érdekében a flex-container, használhatja a flex-wrap ingatlan:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Ha nincs elég hely az alárendelt elemek számára, hogy elférjenek az egyik sorban, akkor most körbefutnak, és a következőn folytatják.
Most alkalmazzon rács-elrendezést a másodikra ezt a CSS-t használva:
.grid-container {
display: grid;
}
Semmi sem fog történni önmagában a fenti deklarációval, mert a Grid alapértelmezett viselkedése olyan sorokat hoz létre, amelyek egymásra halmozódnak.
Ha oszlopmegjelenítésre szeretne váltani, módosítania kell a grid-auto-flow ingatlan (ami sor alapértelmezés szerint):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Most itt az eredmény:
Az egyes sorokban kívánt oszlopok pontos számának megadásához használja a rács-sablon-oszlopok:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Ez az érték öt egyenlő szélességű oszlopot hoz létre. A Flexboxhoz hasonló burkolási viselkedés eléréséhez használhat olyan reszponzív tulajdonságokat, mint pl automatikus illeszkedés és minimum maximum:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Gyakran hallani fogod, hogy a Flexbox-ot és a Grid-et egydimenziósnak, illetve kétdimenziósnak nevezik. Ez azonban nem a teljes igazság, mert mind a Flexbox, mind a Grid képes a kétdimenziós elrendezési rendszer. Csak másképpen csinálják, más-más megszorításokkal.
A legfontosabb az elrendezés egydimenziós aspektusának szabályozási módja. Vegyük például a következő képet:
Figyelje meg, mennyire konzisztens a Rács oszlop, és mennyire egyenetlenek a Flexbox egyes oszlopai. A rugalmas tároló minden sora/oszlopa független a másiktól. Így egyesek nagyobbak lehetnek, mint mások, a tartalom méretétől függően. Ezek kevésbé olyanok, mint az oszlopok, és inkább független blokkok.
A rács másként működik: 2D rácsot állít be alapértelmezés szerint zárolt oszlopokkal. A rövid szöveget tartalmazó oszlop ugyanolyan méretű lesz, mint a sokkal hosszabb szövegű oszlop, amint azt a fenti kép is mutatja.
Összefoglalva, a CSS Grid egy kicsit strukturáltabb, míg a Flexbox sokkal strukturáltabb rugalmas és érzékeny elrendezési rendszer. Ezek az alternatív elrendezési rendszerek jól elnevezettek!
Mikor kell használni a Flexboxot?
Szeretne az egyes oszlopok/sorok belső méretére támaszkodni, a tartalmuk által meghatározottak szerint? Vagy strukturált irányítást szeretne a szülő szemszögéből? Ha a válasz az első, akkor a Flexbox a tökéletes megoldás az Ön számára.
Ennek bemutatásához vegyen fontolóra egy vízszintes navigációs menüt. Cserélje ki a jelölést a címkék ezzel:
<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>
Cserélje ki a jelölést a CSS fájlban erre:
.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;
}
Íme az eredmény:
Most alakítsa át az első navigációt rugalmas elrendezéssé, a másodikat pedig rácsos elrendezéssé a következő CSS hozzáadásával:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Hasonlítsa össze az eredményeket, hogy megtudja, melyik volt alkalmasabb:
A fenti képen látható, hogy ebben az esetben a Flexbox a tökéletes megoldás. Vannak olyan elemek, amelyeket egymás mellé szeretne helyezni, és megőrizni belső méretüket (a szöveg hosszától függően nagy vagy kicsi). A Grid használatával minden cellának fix szélessége van, és nem néz ki olyan jól – legalábbis egyszerű szöveges hivatkozásokkal.
Mikor kell használni a CSS-rácsot?
Az egyik hely, ahol a Grid igazán kiváló, az az, amikor merev rendszert akarunk létrehozni a szülőből. Példa erre a kártyaelemek halmaza, amelyeknek egyformán szélesnek kell lenniük, még akkor is, ha különböző mennyiségű tartalmat tartalmaznak.
Cserélje ki a jelölést a belsejében címkék ezzel:
<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>
Adja hozzá ezt a CSS-t:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Kezdje a Flexbox kijelzővel, hogy lássa, hogyan néz ki, így összehasonlíthatja a rácsos kijelzővel. Íme a kimenet:
Figyelje meg, hogy az utolsó oszlop nagyobb a többinél a belső méretezése miatt, amit a Flexbox jól kezel. De ahhoz, hogy a Flexbox használatával azonos szélességűek legyenek, szembe kell mennie ezzel a belső méretezéssel a következő hozzáadásával:
.columns > * {
flex: 1;
}
Ez teszi a trükköt. De a Grid jobban megfelel az ilyen esetekre. Csak megadja az oszlopok számát, és már mehet is:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Íme az eredmény:
A Grid használatának másik előnye, hogy a szülő irányítja a gyerekek elrendezését. Így hozzáadhat és eltávolíthat gyermekelemeket anélkül, hogy aggódnia kellene az elrendezés megsértése miatt.
Tehát mikor érdemes Grid-et vagy Flexbox-ot használni?
Összefoglalva, a CSS Grid nagyszerű, ha strukturált vezérlőelemet szeretne a szülő szemszögéből, azonos méretű oszlopokkal, függetlenül az egyes tartalmak méretétől.
A Flexbox viszont ideális, ha rugalmasabb, az elemek belső méretezésén alapuló rendszert szeretne.
