Ez az átfogó CSS flexbox-cheatsheet mindent lefed, amit tudnia kell ahhoz, hogy elkezdhesse a flexbox használatát webes projektjeiben.
A CSS flexbox elrendezés lehetővé teszi a HTML egyszerű formázását. A Flexbox megkönnyíti az elemek függőleges és vízszintes igazítását sorok és oszlopok segítségével. Az elemek különböző méretűre hajlanak, hogy kitöltsék a helyet. Ez megkönnyíti az adaptív tervezést.
A CSS flexbox kiválóan használható a webhely vagy alkalmazás általános elrendezéséhez. Könnyen megtanulható, minden modern böngészőben támogatott, és az alapok kitalálása nem tart ilyen sokáig. Ezen útmutató végén készen áll a flexbox használatára a webes projektjeiben.
A cikk a Scott Domes animációs gifjeit tartalmazza, amelyek még könnyebben megértik és vizualizálják a flexboxot.
Az összes CSS Flexbox tulajdonság
Itt található az összes CSS flexbox tulajdonság, amely felhasználható az elemek elhelyezésére a CSS-ben. Ezután meglátja, hogyan működnek.
A tárolóra alkalmazható CSS
display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: || justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;
A tárolóban lévő elemekre / elemekre alkalmazható CSS
order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis: | auto; /* default auto */ flex: none | [ ? || ] align-self: auto | flex-start | flex-end | center | baseline | stretch;
Terminológia

Mielőtt megtudná, mit csinálnak a flexbox tulajdonságai, fontos megértenie a kapcsolódó terminológiát. Itt vannak a legfontosabb flexbox kifejezések meghatározása, amelyeket a flexbox hivatalos W3C specifikációjából vettünk át.
- főtengely : A hajlékony tartály fő tengelye az elsődleges tengely, amely mentén a hajlékony elemeket elrendezik. Az irány a flex-direction tulajdonságon alapszik.
- main-start | fő-vég :A hajlékony elemeket a tartályba helyezzük, kezdve a fő kezdő oldalon és a fő vég felé.
- fő méret : A hajlékony tartály vagy hajlékony elem szélessége vagy magassága, attól függően, hogy melyik a fő dimenzió, az a doboz fő mérete. Fő méretjellemzője tehát a szélessége vagy a magassága, attól függően, hogy melyik a fő dimenzió.
- kereszt tengely : A fő tengelyre merőleges tengelyt kereszt tengelynek nevezzük. Iránya a főtengely irányától függ.
- keresztindítás | keresztirányú : A hajlékony vonalakat elemekkel töltik fel, és a tartályba helyezik a hajlító tartály keresztirányú oldalától kezdve és a keresztirányú oldal felé haladva.
- keresztméret : A hajlékony elem szélessége vagy magassága, attól függően, hogy melyik a keresztdimenzió, a cikk keresztmérete. A keresztméret tulajdonság a keresztméretben szereplő „szélesség” vagy „magasság” bármelyike.
CSS Display Flex
display: flex
"azt mondja a böngészőjének:" Szeretnék flexboxot használni ezzel a tárolóval, kérem. "
div
Alapértelmezés szerint egy elem display:block
. Az ezzel a megjelenítési beállítással rendelkező elem a vonal teljes szélességét lefedi. Íme egy példa a szülő div négy színes div-jére, az alapértelmezett megjelenítési beállítással:

Ha flexboxot szeretne használni az oldal egy részén, először konvertálja a szülőtartályt flex-tárolóvá úgy, display: flex;
hogy hozzáadja a szülőtároló CSS-jéhez.
Ez inicializálja ezt a tárolót rugalmas tárolóként, és néhány alapértelmezett flex tulajdonságot alkalmaz.

Flex irány
flex-direction
lehetővé teszi a tárolóban lévő elemek megjelenítésének szabályozását. Szeretné őket balról jobbra, jobbról balra, fentről lefelé vagy lentről lefelé? Mindezeket egyszerűen megteheti flex-direction
a tartály beállításával .
Az alkalmazás alapértelmezett elrendezése display: flex
az, hogy az elemeket a fő tengely mentén balról jobbra kell elrendezni. Az alábbi animáció megmutatja, mi történik, ha flex-direction: column
hozzáadódik a tároló elemhez.

Azt is beállíthatja flex-direction
, hogy row-reverse
és column-reverse
.

Indokolja a tartalmat
justify-content
tulajdonság, amely a tárolóban lévő elemeket a fő tengely mentén igazítja (lásd a fenti terminológiai ábrát). Ez attól függ, hogy a tartalom hogyan jelenik meg. Ez lehetővé teszi számunkra, hogy kitöltsünk minden üres helyet a sorokban, és meghatározzuk, hogyan akarjuk ezt „igazolni”.
Itt vannak a leggyakrabban használt funkciók indokolják tartalom: flex-start | flex-end | center | space-between | space-around
.
Így néznek ki a különböző lehetőségek:

space-between
elosztja az elemeket úgy, hogy az első elem egy szintben legyen a kezdettel, az utolsó pedig a végével. space-around
hasonló, de az elemek mindkét végén fél méretű szóköz van.
Flex Align Items
align-items
lehetővé teszi számunkra, hogy az elemeket a kereszttengely mentén igazítsuk (lásd a fenti terminológiai ábrát). Ez lehetővé teszi a tartalom sokféle elhelyezését a tartalom igazolásával és az elemek egymáshoz igazításával.
Az elemek igazításához a következő leggyakoribb lehetőségek állnak rendelkezésre: flex-start | flex-end | center | baseline | stretch
Ahhoz stretch
, hogy az elvárt módon működjön, az elemek auto
magasságát meghatározott magasság helyett be kell állítani .
Ez az animáció megmutatja, hogy néznek ki a lehetőségek:

Most mindkettőt justify-content
és align-items
. Ez megmutatja a főtengelyek és a kereszttengelyek közötti különbséget.

Igazítsa önmagát
align-self
lehetővé teszi egyetlen elem igazításának beállítását.
Ugyanazokkal a tulajdonságokkal rendelkezik, mint align-items
.
A következő animációban a szülő div rendelkezik a CSS align-items: center
és flex-direction: row
. Az első két négyzet különböző align-self
értékeken mozog.

Flex Wrap
A Flexbox alapértelmezés szerint megpróbálja az összes elemet egy sorba illeszteni. Ezt azonban a flex-wrap
tulajdonsággal megváltoztathatja . Három érték segítségével határozhatja meg, hogy az elemek mikor kerülnek egy másik sorba.
Az alapértelmezett érték flex-wrap: nowrap
. Ettől minden egy sorban marad balról jobbra.
flex-wrap: wrap
lehetővé teszi az elemek felugrását a következő sorba, ha nincs elég hely az első sorban. Az elemek balról jobbra jelennek meg.
flex-wrap: wrap-reverse
lehetővé teszi az elemek felugrását a következő sorba, de ezúttal jobbról balra jelennek meg.
Flex Flow
flex-flow
kombinálja a flex-wrap
és flex-direction
egyetlen tulajdonság. Először az irány beállításával, majd a tekeréssel használják. Íme egy példa:flex-flow: column wrap;
Igazítsa a tartalmat
align-content
az elemek több soros igazítására szolgál. A kereszttengelyre való igazításra szolgál, és nem lesz hatással az egy vonalú tartalomra.
Itt vannak a lehetőségek: align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Függőlegesen központosítva a Flexbox-szal
Ha függőlegesen akarja központosítani az összes tartalmat egy szülő elem belsejében, akkor használja align-items
. Itt van a használni kívánt kód:
.parent { display: flex; align-items: center; }
Játékok és alkalmazások
Ha gyakorolni szeretné a flexbox használatát, próbálja ki ezeket a játékokat és alkalmazásokat, amelyek segítenek elsajátítani a flexboxot.
- A Flexbox Defense egy olyan internetes játék, ahol megtanulhatja a flexboxot, miközben megpróbálja megakadályozni, hogy a bejövő ellenségek túllépjenek a védekezésén.
- A Flexbox Froggy egy olyan játék, ahol CSS kód megírásával segítesz Froggynak és barátainak.
- Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.
- Flexbox Patters is a website that shows off a bunch of Flexbox examples.
Conclusion
We've covered all the most common CSS flexbox properties. The next step is practice! Try making a few projects using flexbox so you can get used to how it works.