Flexbox és Grid játszótér

A Flexbox és Grid játszótér használata

1. Válassz Elrendezést: Flexbox vagy Grid, vagy indulj az Előbeállítások egyikéből (Középre igazított, Navigációs sáv, Tördelődő kártyák, Oldalsáv, Reszponzív kártyarács, Holy grail, 12 oszlop).
2. Állítsd be a Tároló tulajdonságait. Flexboxnál: flex-direction és flex-wrap. Gridnél: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items és grid-template-areas. Mindkettőnél közös a justify-content, az align-items, az align-content, a row-gap (px) és a column-gap (px).
3. Az Elemeket az Elem hozzáadása, a Kijelölt elem eltávolítása és a Kijelölt elem visszaállítása gombbal kezelheted. Egy elem kijelöléséhez kattints rá az előnézetben (vagy told rá a fókuszt Tabbal, és nyomj Entert).
4. Szerkeszd a kijelölt elemet: order és align-self mindkét módban, flex-grow, flex-shrink és flex-basis flexboxnál, valamint grid-area, grid-column, grid-row és justify-self gridnél.
5. A CSS-kódot és a hozzá tartozó HTML-kódot a Másolás gombokkal másolhatod ki.

Minden vezérlő szabványos űrlapmező, így az egész játszótér csak billentyűzettel is használható. A CSS csak azokat a tulajdonságokat tartalmazza, amelyeket az alapértelmezettől módosítottál, így rövid marad, az azonos beállítású elemek pedig egy szabályt osztanak (.item, ha mind egyezik).

A flexbox dióhéjban

A flexbox az elemeket egy tengely mentén rendezi el. A flex-direction adja meg a főtengelyt (sor vagy oszlop); a justify-content ennek mentén osztja el az elemeket (center, space-between…), az align-items pedig a keresztirányú tengelyen helyezi el őket. A flex-wrap: wrap esetén a nem elférő elemek új sorba kerülnek, az align-content pedig ezeket a sorokat osztja el.

Minden elemnek három méretezési tulajdonsága van, amelyeket általában együtt, flex néven írnak:

• flex-basis: a kiindulási méret (az auto a tartalmat vagy a width értéket használja);
• flex-grow: az elem mennyit vesz el a szabad helyből (0 = semmit, 1 = egyenlő részt);
• flex-shrink: mennyit ad fel, ha kevés a hely (0 = soha nem zsugorodik).

Az Oldalsáv előbeállítás a klasszikus mintát mutatja: egy flex-basis: 200px és flex-shrink: 0 értékű oldalsáv, és egy flex-grow: 1 értékű fő terület.

A CSS Grid dióhéjban

A grid az elemeket két dimenzióban rendezi el. A grid-template-columns: repeat(3, 1fr) három egyenlő oszlopot hoz létre; az fr a szabad hely egy része. A repeat(auto-fill, minmax(120px, 1fr)) annyi legalább 120 px széles oszlopot hoz létre, amennyi elfér, így media query nélkül kapsz reszponzív kártyarácsot.

Az elemek sorban töltik ki a cellákat, hacsak el nem helyezed őket: a grid-column: span 2 két oszlop szélesre teszi az elemet, a grid-column: 1 / -1 pedig az egész soron végigfeszíti.

A grid-template-areas lehetővé teszi, hogy nevekkel rajzold meg az elrendezést. Írj soronként egy sort, például header header, majd nav main, és adj az elemeknek grid-area: header vagy grid-area: main értéket. A pont üres cellát jelöl. Minden sorban ugyanannyi cellának kell lennie, és minden névnek téglalapot kell alkotnia; ellenkező esetben az eszköz figyelmeztet.