A dimenziók határozzák meg az elsődleges elhatárolást a Flexbox és a CSS Grid között. A Flexbox-ot kifejezetten egydimenziós elrendezésekhez tervezték, míg a CSS Grid-et úgy tervezték, hogy lehetővé tegye a kétdimenziós elrendezéseket. Ezért a CSS Grid egyszerűen képes egyszerre megjeleníteni a sorokat és oszlopokat.
A laikusok szerint a CSS Grid nagyobb vásznat mutat be, míg a Flexbox apró funkciókat kínál, amelyek korlátozott helyen működnek. A rácsokat kétdimenziós szervezet számára tervezték.
A két specifikáció azonban megoszt néhány közös pontot, és ha tudja, hogyan kell használni a rugalmas dobozokat, talál néhány fogalmat, amelyek segítenek megérteni a CSS-rácsokat.
Ebben a cikkben áttekintjük a Grid és a Flexbox közötti főbb különbségeket, az alábbiak szerint összefoglalva:
- A Flexbox egydimenziós elrendezéshez készült, a Grid pedig kétdimenziós elrendezéshez.
- A CSS Grid megközelítése az első az elrendezés, míg a Flexbox megközelítés elsősorban a tartalom.
- A Flexbox elrendezés a legalkalmasabb az alkalmazás komponenseihez és a kis méretű elrendezésekhez, míg a Rács elrendezést nagyobb méretű elrendezésekhez tervezték, amelyek nem lineárisak.
A Flexbox és a Grid megismerése
Az egydimenziós Flexbox
A CSS Flexible Box Layout (vagy Flexbox) lehetővé teszi a tervezők számára, hogy az érzékeny elemeket megfelelően helyezzék el a különböző méretű képernyőkön. Az eszközök a következők:
- doboz elrendezés a dokumentumokhoz,
- beágyazott elrendezés a szöveg megjelenítésének meghatározására a képernyőkön,
- táblázatos elrendezés táblázatos adatok ábrázolásához egy dimenzióban,
- és egy pozicionált elrendezési mód, amely lehetővé teszi az érzékeny elemek kifejezett pozícionálását.
A Flexbox népszerű a front-end fejlesztők körében, mivel lehetővé teszi a fejlesztők számára, hogy több dinamikus elrendezést hozzanak létre, és könnyedén összehangolják a tartalmat a tárolókon belül.
A rugalmas doboz modult egydimenziós bemutató modellként, és olyan módszerként tervezték, amely területi eloszlást tud biztosítani az interfész elemek és az erőteljes igazítási funkciók között. Amikor a flexbox-ot egydimenziósként írjuk le, azt a tényt írjuk le, hogy a flexbox elrendezéseket egyszerre egy dimenzióban, sorként vagy oszlopként dolgozza fel. Ez összehasonlítható a CSS rács elrendezés kétdimenziós modelljével, amely az oszlopokat és a sorokat együtt vezérli.
One Two Three Four Five .wrapper { width: 500px; display: flex; flex-wrap: wrap;}.wrapper > div { flex: 1 1 150px;}
Előnyök:
- A Flex bármilyen irányba elrendezhető
- A Flex vizuális sorrendjét megfordíthatja vagy átrendezheti.
- Az elemek igazíthatók a tárolóba vagy azok közé.
- Támogatja az összes böngészőt.
Hátrányok:
- Teljesítménybeli problémák
A kétdimenziós rács
A CSS Grid igazítja az oszlopokban és sorokban lévő elemeket, lehetővé téve a fejlesztők számára, hogy egyszerűen ellenőrizzék az asztali, táblagépes és okostelefonos kijelzők számára szánt nagy elrendezések és teljes oldalak megjelenítését és megjelenését.
Az elemeket a rács által meghatározott cellákba helyezzük. A teljes elrendezés létrehozása és meghatározása továbbra is a CSS Grid erős választása. Az Internet Explorer, a Chrome, a Safari, az Edge és a Firefox támogatja a Grid alkalmazást. Nevezetesen az Opera Mini, a Blackberry Browser, a QQ Browser és a Baidu Browser nem támogatja a Grid alkalmazást.
Automatizálást kínál egy elrendezés létrehozására, vagy olyan automatikus elhelyezési szabályok meghatározására, amelyek végrehajtják az elhelyezéseket egy adott rácson belül.
One Two Three Four Five .wrapper { display: grid; grid-template-columns: repeat(3, 1fr);}
Előnyök:
- A rácssávok a stíluslapon belül jönnek létre.
- Csökkentett fájlméretek.
- A prototípus-készítés a CSS Grid segítségével gyors és hatékony.
Hátrányok:
- Nem minden böngésző támogatja
Különbségek a flex és a rács között
Méret és rugalmasság
A Flexbox nagyobb irányítást kínál az elemek közötti igazítás és a térelosztás között. Mivel egydimenziós, a Flexbox csak oszlopokkal vagy sorokkal foglalkozik. Ez a rendszer kisebb elrendezéseknél működik, de nem képes olyan komplex megjelenítéseket megjeleníteni, mint például szöveg- vagy dokumentumközpontú tulajdonságok, amelyek lehetővé teszik az úszókat és az oszlopokat.
A rács kétdimenziós elrendezési képességekkel rendelkezik, amelyek lehetővé teszik a hajlékony szélességeket hosszúságegységenként. Ez kompenzálja a Flex korlátozásait.
Igazítás
A Flexbox lehetővé teszi az igazítások finomhangolását a specifikáció pontos megosztása érdekében. A Flex Direction lehetővé teszi a fejlesztők számára az elemek függőleges vagy vízszintes igazítását, amelyet akkor használnak, amikor a fejlesztők sorokat vagy oszlopokat hoznak létre és fordítanak vissza.
Mindkét dimenzió szélesebb összehangolásához egyidejűleg a CSS Grid töredékes mértékegységeket alkalmaz a rácsos folyamatosság és az automatikus kulcsszó funkciók segítségével az oszlopok vagy sorok automatikus beállításához. A beépített automatika megmenti a fejlesztőket az újrakezdési rendszertől, amely esetleg zavaros számításokból származhat.
Elemkezelés
A Flex Container a szülőelem, míg a Flex Item a gyerekeket. A Flex Container kiegyensúlyozott ábrázolást tud biztosítani a cikk méretének beállításával. Ez lehetővé teszi a fejlesztők számára, hogy a változó képernyőméretekhez tervezzenek.
Ennek az esztétikának a finomhangolásához a Grid mind az implicit, mind az explicit tartalom elhelyezést támogatja. Beépített automatizálása lehetővé teszi, hogy a sorokat automatikusan kiterjessze, és az értékeket átmásolja az előző elem új alkotásába.
Következtetés
A Flexbox és a CSS Grid egyaránt hatékony ellenőrzést tesz lehetővé a front-end fejlesztési területek felett. Képességeik azonban fokozódnak, ha kombinálják őket, és a saját erősségeiket felhasználva rendkívül folyékony, testreszabható, gyönyörű, sima és egyszerű élményt nyújtanak.
Kódjuk kombinálása szintén könnyebb beállítást eredményez, ahol az absztrakció mindkét területen átterjed a másikra. Hatalmas alkalmazásokat kínál mindkét lehetőséghez, és még többet, ha erőteljes beállítássá egyesítik őket.
Itt többet megtudhat a rács elrendezés és más elrendezési módszerek kapcsolatáról.
Ezt a cikket a techiespad blog tagjai tippelték.