Flexbox - Az Ultimate CSS Flex Cheatsheet (animált diagramokkal!)

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.