A Flexbox és a CSS Grid alapos ismerete szükséges, ha lenyűgöző, reszponzív webhelyeket szeretne készíteni.
Ha már régóta ír CSS-t, jó eséllyel legalább hallott ezekről a kifejezésekről. Lehet, hogy bizonyos mértékig az egyiket vagy mindkettőt használta. Mindkettő erőteljes része a CSS-nek, hasonló, de finoman eltérő használati esetekkel.
Mi az a Flexbox?
A Flexbox egy egydimenziós CSS-elrendezési módszer, amely már régóta létezik. A Flexboxot úgy tekintheti, mint egy csomó kapcsolódó CSS-tulajdonságot, amellyel a tárolóban lévő HTML-elemeket igazíthatja, és kezelheti a köztük lévő teret.
A Flexbox előtt ez a fajta elrendezés frusztráló és nehézkes használatot igényelt az úszó és pozíció tulajdonságai.
Ha aggódik a Flexbox böngésző támogatása miatt, ne aggódjon. Alapján caniuse.com, minden modern böngésző támogatja a Flexboxot.
A Flexbox alapjai
Míg A Flexbox számos CSS-tulajdonságot tartalmaz, az alapok nagyon egyszerűek. A Flexbox használata mindig azzal kezdődik, hogy hozzáadásával egy szülőtárolót flex-tárolóként deklarál
kijelző: flex stílusszabályaihoz. Ezzel automatikusan az elem összes leszármazottja lesz flex-elem.Ezt követően a flex-tartályon belüli térelosztást a gombbal szabályozhatja indokol-tartalom tulajdonság. Szabályozhatja a rugalmas elemek igazítását a align-ites ingatlan.
Íme egy kódpélda, amely a Flexbox segítségével egyenletesen osztja el a tároló területét a gyermekei között, és igazítja őket a tároló közepére. Ez a HTML:
<div class="tartály">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Ez a CSS:
.tartály {
kijelző: flex;
szélesség: 100%;
indokolja-tartalom: tér-körül;
align-ites: center;
keret: 1px tömör fekete;
magasság: 200 képpont;
}
.tartály > div {
magasság: 100 képpont;
szélesség: 100 képpont;
háttérszín: piros;
fehér szín;
betűméret: 5rem;
szöveg igazítása: középre;
határsugár: 5 képpont;
}
És íme a kimenet:
Mi az a CSS Grid?
A CSS Grid egy olyan elrendezési rendszer, amely kiegészíti a Flexboxot. A Flexbox erős, de nem nagyon alkalmas bizonyos típusú elrendezésekhez. A Flexbox segítségével egy teljes oldal szerkezetének elrendezése frusztráló feladat lesz, amely csúnya, nem szematikus jelölésekkel és hackelt CSS-sel jár.
A CSS Grid nem a Flexbox helyettesítője, hanem egy alternatív rendszer bizonyos helyzetekre.
A CSS Grid támogatása nem olyan kiterjedt, mint a Flexboxé, de a Grid igen ésszerűen jól támogatott 2022-ben.
A CSS Grid alapjai
A Grid koncepciója egyszerű. Ahogy a neve is sugallja, a CSS Grid lehetővé teszi, hogy a szülőtárolóban lévő teret sor-oszlop rácsra ossza fel, tetszőleges számú sorral/oszloppal. Ezt követően a szülő rács vonalaira hivatkozva adja meg az utódelemek pozícióját.
Kezdje a hozzáadással kijelző: rács a szülőtárolóba. Ezután használja a rács-sablon-sorok és rács-sablon-oszlopok tulajdonságokkal megadhatja azokat a sorokat és oszlopokat, amelyekre fel szeretné osztani a rácsot. Ezután használhatja a rács-oszlop és rács-sor tulajdonságokat a gyermekelemeken, hogy megmondják nekik, hogy a rácsban hol kell lenniük. Nézzünk egy Grid példát, amely a korábbi ötelemes beállítást használja, de bonyolultabb elrendezésben.
Íme a HTML:
<div class="tartály">
<div>1</div>
<div class="kettő">2</div>
<div class="három">3</div>
<div class="négy">4</div>
<div class="öt">5</div>
</div>Íme a CSS:
.tartály {
kijelző: rács;
szélesség: 100%;
grid-template-rows: ismétlés (3, 1fr);
grid-template-columns: ismétlés (3, 1fr);
rés: 0.5rem;
keret: 1px tömör fekete;
magasság: 300 képpont;
}.tartály > div {
háttérszín: piros;
fehér szín;
betűméret: 5rem;
szöveg igazítása: középre;
határsugár: 5 képpont;
}
.tartály > .kettő {
rács-sor: 2;
rács-oszlop: 2;
}
Íme a kimenet:
A CSS Grid számos elemet is tartalmaz egyéb tulajdonságok, amelyek segítségével bonyolultabb elrendezéseket hozhat létre.
Melyiket érdemes használni?
Először is fontos megjegyezni, hogy semmi sem akadályozza meg a Flexbox és a Grid együttes használatát, és bizonyos esetekben ez az optimális választás. Ennek ellenére válaszoljunk arra a kérdésre, hogy ezek a rendszerek mely elrendezések megvalósítására a legalkalmasabbak.
A Flexbox a legalkalmasabb olyan elrendezésekhez, amelyek az elemek egy sorban történő igazítását és elosztását foglalják magukban. Ilyen elrendezés például az ikonok igazítása a szakasz végén, vagy a hivatkozások elrendezése a navigációs sávban.
A rács viszont akkor ragyog a legfényesebben, ha az elemeket pontosan kell pozícionálni a többihez képest (vízszintesen és függőlegesen is), és erre az elhelyezésre van szüksége, hogy könnyen alkalmazkodjon a különböző képernyőméretekhez.
A bemutatáshoz itt van a kód, amelyet meg kell írnia, hogy újra létrehozza az elrendezést a Grid példából a Flexbox segítségével.
A HTML:
<div class="tartály">
<div class="al egy">
<div>1</div>
<div>5</div>
</div><div class="al kettes">
<div>2</div>
</div>
<div class="al három">
<div>4</div>
<div>3</div>
</div>
</div>
A CSS:
.tartály {
keret: 1px tömör fekete;
magasság: 300 képpont;
}.alatti {
kijelző: flex;
szélesség: 100%;
}.egy, .három {
indokol-tartalom: szóköz-között
}.kettő {
indokol-tartalom: center;
}
.alatti > div {
magasság: 100 képpont;
szélesség: 100 képpont;
háttérszín: piros;
fehér szín;
betűméret: 5rem;
szöveg igazítása: középre;
határsugár: 5 képpont;
}
És íme a kimenet:
Itt a legfontosabb megjegyezni, hogy bár ez a kód ugyanazt a kimenetet adja, mint a Grid példa, a jelölés itt lényegesen bonyolultabb. Ennek az elrendezésnek a megvalósításához alkonténerekre van szükség, és a számozott diveket a jelölésben rendellenesen kell elhelyezni.
Továbbá, tegyük fel, hogy ezt az elrendezést kínos helyzetbe kell állítania: mondjuk az 5. div-t igazítsa a 2-eshez. Ha a Flexboxot használta volna ehhez, akkor ehhez kell folyamodnia pozíció: relatív vagy valami hasonló. A Grid használatával mindössze annyit kell tennie, hogy eltolja a rács-oszlop ingatlan.
Ezzel szemben a Flexbox példából származó egyszerű egysoros igazítás megvalósítása Griddel sokkal több CSS-t eredményezne. A rács nyilvánvalóan kevésbé alkalmas az ilyen elrendezéshez.
Míg a Flexbox és a Grid többnyire megismételheti egymás hatásait, van néhány kivétel. Az elemek átfedése meglehetősen nehéz csak a Flexbox segítségével, de nagyon egyszerű a Griddel. A rács azt sem teszi lehetővé, hogy az elemek eltolják magukat a többi elemtől margóval: automatikusan, ahogy a Flexbox teszi.
A Flexbox és a Grid hatékony elrendezési rendszerek
A Flexbox és a CSS Grid egyaránt olyan tervezőrendszer, amely megkönnyíti a weboldal tartalmának elrendezését. A rács a legjobb a kétdimenziós elrendezésekhez, ahol sok elemet kell pontosan elhelyezni egymáshoz képest. A Flexbox jobb az egydimenziós vagy egysoros elrendezésekhez, ahol csak egy csomó elemet kell meghatározott módon elhelyezni.