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. "
divAlapé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-directionlehető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-directiona tartály beállításával .
Az alkalmazás alapértelmezett elrendezése display: flexaz, 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: columnhozzáadódik a tároló elemhez.
Azt is beállíthatja flex-direction, hogy row-reverseés column-reverse.
Indokolja a tartalmat
justify-contenttulajdonsá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-betweenelosztja az elemeket úgy, hogy az első elem egy szintben legyen a kezdettel, az utolsó pedig a végével. space-aroundhasonló, de az elemek mindkét végén fél méretű szóköz van.
Flex Align Items
align-itemslehető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 automagassá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-wraptulajdonsá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-flowkombinálja a flex-wrapés flex-directionegyetlen 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-contentaz 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.