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 :-)