CSS Flexbox tippek és trükkök

A CSS Flexbox lehetővé teszi, hogy egyszerűen formázza a HTML-jét, úgy, mintha soha nem tudta volna. A Flexbox segítségével könnyedén beállíthat függőlegesen és vízszintesen is. Tetszik ennek a hangja? Igen, én is.

A Flexbox rendkívül hasznos akkor is, ha a webhely vagy alkalmazás általános elrendezését készíti. Könnyen megtanulható, jól támogatott (minden modern böngészőben), és nagyszerű vele dolgozni - arról nem is beszélve, hogy az alapok megszerzése nem tart sokáig.

Merüljünk hát be, és tudjunk meg többet.

Flexbox

Az alábbiakban felsoroljuk azokat a Flexbox tulajdonságokat, amelyek felhasználhatók az elemek elhelyezésére a CSS-ben:

Egy tárolóhoz 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;

Tehát most megvan az eszköztár. De megkérdezheti: "Mit tegyek az eszközeimmel, és hogyan használjam?" Nos, hadd mutassam meg.

Kijelző Flex

display: flex;csak azt mondja a böngészőjének: "hé, szeretném használni a Flexboxot ehhez a tárolóhoz, kérem." Ez inicializálja ezt a mezőt Flex-tárolóként, és néhány alapértelmezett Flex-tulajdonságot alkalmaz.

Így néz ki konténerünk anélkül display: flex;:

A CSS játszótéren nincsenek flex tulajdonságok

A hozzáadás után display: flex;megkapjuk az alábbiakat - láthatja, hogy az alapértelmezett Flex tulajdonságokat alkalmazzák, ami így néz ki:

A CSS játszótér alapértelmezett stílusa rugalmas

Flex irány

flex-direction:lehetővé teszi számunkra, hogy ellenőrizhessük a tárolóban lévő elemek megjelenítését. Szeretné őket balról jobbra, jobbról balra, fentről lefelé vagy lentről lefelé? Mindezt egyszerűen megteheti a tartály Flex irányának beállításával.

A Flexbox sorokat alkalmaz alapértelmezett irányként. Így néznek ki mind:

flex-direction: row;

hajlítási irány: sor;  példa

flex-direction: row-reverse;

flex-direction: sor-fordított példa

flex-direction: column;

flex-direction: oszlop példa

flex-direction: column-reverse;

flex-direction: oszlop-fordított példa

Flex Wrap

A Flexbox alapértelmezés szerint megpróbálja az összes elemet egy sorba illeszteni. De ezt megváltoztathatja a flex-wrap tulajdonsággal. Ez lehetővé teszi annak kiválasztását, hogy az elemek átcsordulnak-e vagy sem.

3 tulajdonság van a következőkre flex-wrap::

flex-wrap: nowrap az alapértelmezett, és megpróbál mindent egy sorba tenni balról jobbra.

flex-wrap: wrap lehetővé teszi az elemeket, hogy balról jobbra több sort hozzanak létre.

flex-wrap: wrap-reverse lehetővé teszi, hogy az elemek több sorban legyenek, de ezúttal jobbról balra jelennek meg.

Flex Flow

A Flex flow egyesíti a flex-wrapés flex-directiona tulajdonságokat egyetlen tulajdonságban. Először az irány beállításával, majd a tekeréssel használják.

flex-flow: column wrap; egy példa arra, hogyan kell ezt használni.

Indokolja a tartalmat

justify-content olyan tulajdonság, amely a tárolóban lévő elemeket a fő tengely mentén igazítja (ez a tartalom megjelenítési módjától függően változik).

Ennek több lehetősége van. Lehetővé teszi számunkra, hogy minden üres helyet sorokba töltsünk, de meghatározhatjuk, hogyan akarjuk ezt „igazolni”.

Itt vannak a lehetőségek, amikor igazolják azt a tartalmat: flex-start | flex-end | center | space-between | space-around;.

Igazítsa az elemeket

Az elemek igazítása lehetővé teszi számunkra, hogy az elemeket a kereszttengely mentén igazítsuk. Ez lehetővé teszi a tartalom sokféle elhelyezését a tartalom igazolásával, és az elemeket egymáshoz igazítja.

align-items: flex-start | flex-end | center | baseline | stretch;

Igazítsa a tartalmat

Ez az elemek több sorral való összehangolására szolgál. A kereszttengelyen való igazításra szolgál, és nem lesz hatással az egy soros tartalomra.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Egyéb források a Flexboxon és a Griden

Cikkek és tanfolyamok

Az Ultimate CSS Flex Cheatsheet

Teljes CSS videó tanfolyam (tartalmazza a Flexboxot és a Gridet)

A CSS Flexbox vizuális útmutatója

Képgaléria létrehozása a CSS Grid segítségével

Játékok és alkalmazások

A Flexbox Defense egy webes játék, amely a flexbox szórakoztató módjára tanítja meg.

A Flexbox Froggy egy olyan internetes játék is, amely megtanítja a flexboxot a szórakozásra.

A Flexbox in 5 egy webalkalmazás, amely lehetővé teszi, hogy néhány egyszerű vezérlővel lássa, hogyan működik a flexbox.

A Flexyboxes egy olyan alkalmazás, amely lehetővé teszi a kódminták megtekintését és a paraméterek megváltoztatását, hogy lássa, hogyan működik a flexbox vizuálisan.

A Flexbox Patters egy olyan webhely, amely rengeteg flexbox példát mutat be.

Videók

Flexbox Essentials

Flexbox gyakorlati példák

Mi a Flexbox ?!