Flexbox vs Grid - Hogyan készítsük el a leggyakoribb HTML-elrendezéseket

Annyi nagyszerű CSS-forrás található az interneten. De mi van akkor, ha csak egy egyszerű elrendezést szeretne, és MOST szeretné?

Ebben a cikkben leírom az 5 leggyakoribb weblap elrendezést és azt, hogy miként készíthetők el a Flexbox és a Grid segítségével.

Hogyan fog működni

Minden elrendezés alatt található egy link a CodePen teljes HTML és CSS kódjához.

Ne feledje, hogy a stílusmeghatározások összeállításához a SASS-t használom, ezért ha ugyanezt szeretné megtenni a helyi nyelven is, telepítse a SASS-t a következővel:

npm i sass -g 

Alap kártya sablon

A fenti kártyát használtam a weboldal elrendezésének alapjaként. Három elemből áll függőleges irányban, így a normál divblokkok jól működnek. Később azonban a középső elemet - a szöveges bekezdést - kell nyújtani.

Itt mind a Flexbox, mind a Grid zökkenőmentesen végzi a munkát. Inkább a Flexboxot szeretem, mivel nekem ez egyszerűbb.

Nyertes: Flexbox

CodePen Flexbox, CodePen Rács

Most kezdjük el létrehozni a különböző elrendezéseket.

# 1 Függőlegesen és vízszintesen középre helyezett kártya

A Flexbox használatakor szükségünk van egy elemre, amely vízszintesen középre áll, és egy másikra (a gyermek elemre), amely függőlegesen középre áll.

A tételek sorrendjét a flex-direction. Azt, hogy az elem hogyan helyezkedik el a rendelkezésre álló térben align-self, az elem vagy align-itemsannak szülője határozza meg.

A Rács esetén három oszlopra és három sorra van szükségünk. Ezután helyezzük a kártyát a középső cellába.

A vízszintes központosítás egyszerű. Három oszlopot és méretüket definiáljuk, grid-template-columns: auto 33% automivel a kártyának a látható terület 1/3-át kell kitennie.

A probléma az, hogy nem ismerjük a függőleges méreteket. Azt akarjuk, hogy a felső és az alsó sor foglalja el a fennmaradó helyet, ami a rács segítségével nem lehetséges. A kártya középen van, de a magassága az ablak magasságától függ.

Ezt azonban megoldhatjuk egy további csomagoló elemmel a kártya köré, és a segítségével középre helyezhetjük margin.

Nyertes: Flexbox

CodePen Flexbox, CodePen Rács

# 2 Két kártya függőlegesen és vízszintesen középen

Gyakran nemcsak egy elemet kell központosítanunk. Ennek a két kártyának ugyanazt a magasságot kell megtartania, ha az egyik vagy a másik hosszabb szöveget tartalmaz.

A Flexbox segítségével mindkét kártyát be kell csomagolnunk egy másik elembe, és ezzel mindkét kártyát egyszerre kell középre állítani.

Nem használhatjuk align-itemsitt, mivel ez ebben az esetben az Y tengelyre vonatkozik. Meg kell határoznunk, hogyan kell elosztani az X tengelyen fennmaradó helyet justify-content: center. Ez biztosítja, hogy mindkét kártya vízszintesen középre kerüljön.

Ha elhagyjuk a Grid változó magasságú problémáját, akkor további csomagoló elemek nélkül is ugyanezt az eredményt érhetjük el. Ezúttal a rácsot öt oszloppal definiáljuk grid-template-columns: auto 33% 50px 33% auto. A többi ugyanaz marad, mint az előző példában.

Nyertes: Flexbox

CodePen Flexbox, CodePen Rács

# 3 Több azonos szélességű és magasságú kártya

Ez egy másik tipikus felhasználási eset a blogok, az e-kereskedelmi webhelyek vagy általában minden olyan webhely esetében, amely valamilyen listát jelenít meg. Azt akarjuk, hogy a kártyák azonos szélességűek és magasságúak legyenek. A magasságot a lista legnagyobb eleméből kell következtetni.

Ezt a Flexboxban lehet megtennifelhasználásával flex-wrap: wrap. Az elemek átkerülnek a következő sorba, ha szélességük meghaladja az egyes sorok hátralévő terét. Ugyanaz a magasság azonban csak egyetlen sor terjedelmében marad meg, hacsak nem határozza meg kifejezetten.

Rácsmegmutatja itt valódi erejét. Ez az elrendezés úgy hozható létre, hogy grid-auto-rows: 1frminden sorban azonos magasságot érvényesít.

Nyertes: Rács

CodePen Flexbox, CodePen Rács

# 4 Szöveg és képek váltakozása függőlegesen és vízszintesen középre

Ebben a példában CTA gombokkal ellátott szöveget kapunk, amelyet a másik oldalon kép kísér. Mindkét alkatrészt függőlegesen középre kell állítani, mivel méretük változhat.

Ez egy darab sütemény a Flexbox számára. Minden sor egy articleelem, amely két csomagolótartályra van osztva, .imgés .content. Az egyenletes méreteloszláshoz ( flex-basis: 50%) szükségesek.

A belső tartalom függőleges központosítását az határozza meg align-items: center.

A váltakozást úgy lehet elérni, flex-direction: row-reversehogy minden furcsa cikknél megfordítjuk a Flexbox irányát .

Rácsezt a használati esetet is szépen kezeli. Nem egy óriási rácsot kell meghatároznunk, hanem mindegyikhez egyet article.

Ugyanolyan széles oszlopokat határoz meg, amelyek függőlegesen középre vannak állítva align-items: center.

A váltakozást cellaszinten határozzák meg a grid-column.

Nyertes: nyakkendő

CodePen Flexbox, CodePen Rács

# 5 Vízszintes fejléc menüvel

Ennek a kialakításnak a Flexbox használatával történő eléréséhez a fejléc mindkét oldalát egyetlen elemmel kell ábrázolni.

A logó és a cég neve anchora bal oldalon található, a menü pedig egyetlen navelem a jobb oldalon. A Flexbox ezzel pozícionálja őket justify-content: space-between.

A Rács esetében két oszlopra van szükségünk: az egyik a logóhoz, a másik a menühez. A menü egy másik rács, amely egyenletesen osztja el az oszlopok méretét a használatával grid-template-columns: repeat(4, minmax(0, 1fr)).

A probléma itt az, hogy ha egy újabb elemet szeretnénk felvenni a menübe, akkor a CSS-t is módosítanunk kell.

Nyertes: Flexbox

CodePen Flexbox, CodePen Rács

És a győztes...

A végeredmény 5: 2 a Flexbox javára, de ez nem jelenti azt, hogy a végső CSS-győztes lesz. Vannak olyan helyzetek, amikor az egyiket vagy a másikat, néha mindkettőt együtt kell használni, hogy elérje a szükségeseket.

Ha rugalmas és feltételes elhelyezésre van szüksége, használja a Flexbox alkalmazást. Ha olyan listákat vagy hasonló struktúrákat szeretne létrehozni, amelyek azonos méretű elemeket igényelnek, vagy táblázattal rendelkeznek, használja a Rácsot.

Mint front-end fejlesztő, nem fogja megúszni, ha nem ismeri mindkettőt.

Referencia útmutató Flexbox, Referencia útmutató rács

PS Ha hiányzott egy olyan elrendezés, amelyet napi szinten használsz, tudasd velem a Twitteren, és elkészítem a folytatást :-)