A CSS Flexbox vizuális útmutatója

Mi a CSS Flexbox?

Az MDN webdokumentumai szerint:

„A CSS Flexible Box Layout a CSS modulja, amely meghatározza a felhasználói felület tervezéséhez optimalizált CSS box modellt és az elemek elrendezését egy dimenzióban. A rugalmas elrendezésű modellben a rugalmas tartály gyermekei tetszőleges irányban elhelyezhetők, és méretüket „meghajlíthatják”, akár megnőnek, hogy kitöltsék a fel nem használt helyet, akár pedig összezsugorodva elkerüljék a szülő túlcsordulását. A gyermekek vízszintes és függőleges beállítása egyaránt könnyen manipulálható. ”

Összefoglalva tehát egy elrendezési modul, amely megkönnyíti a tárolóban lévő elemek egymáshoz igazítását és elosztását.

Vessünk egy gyors pillantást néhány példára arra vonatkozóan, hogy mit lehet tenni legalább 1-2 kódsorral a CSS flexbox segítségével:

Vízszintes igazítás elrendezése:

Függőleges igazítás elrendezése:

Nagyon klassz, mivel csak egy vagy két sor CSS-re volt szükség az egyes konténerek elrendezésének manipulálásához.

Az alapok

A Flexbox tulajdonságai 2 fő típusba sorolhatók:

  1. Tartály tulajdonságai (hajlított irány, hajlékony csomagolás, tartalom igazolása, elemek igazítása, tartalom igazítása)
  2. Flex elem tulajdonságai (rendelés, hajlítás, hajlékony növekedés, hajlékony zsugorodás, igazítás önmagához)

Kijelző: flex

Az első tulajdonság nem specifikus a flexboxra. Ez a tulajdonság display, amit arra az értékre: flex. Ez a tárolón van beállítva, amely tartalmazza azokat az elemeket, amelyeket manipulálni szeretnénk.

Adjunk hozzá néhány látványt, hogy megértsük a működését:

Ha kezdetben van tartályunk, divbenne 3 doboz ( ) van. Így fognak kinézni:

Most tegyük hozzá flexa tárolóhoz:

A CSS egyetlen sora megváltoztatta az elrendezést függőleges irányból vízszintesre.

Fontos fogalmak a Flexbox körül

Ezeket a fogalmakat ebben az útmutatóban fogjuk használni.

  1. Rugalmas tartály: Ez arra a tartályra vonatkozik, amely display: flex;ráállt.
  2. Flex elem: Ezek az egyes gyermekek a Flex Container belsejében
  3. Fő tengely : Alapértelmezés szerint balról jobbra van beállítva.
  4. Kereszt-tengely : Alapértelmezés szerint fentről lefelé van beállítva.

Amint display: flexa tartályra van állítva, ezek a képzeletbeli tengelyek együtt fognak működni annak meghatározása érdekében, hogy a hajlékony tartály belsejében lévő hajlékony elemek hogyan mozogjanak és viselkedjenek. Ez a két tengely irányt változtat, valahányszor megváltoztatunk bizonyos flexbox tulajdonságokat, amelyeket az alábbiakban tárgyalunk.

Rugalmas irány

Ez a tulajdonság határozza meg a képzeletbeli tengelyek irányát. A tengelyek pedig meghatározzák, hogy a rugalmas tartályban lévő elemeket hogyan kell elhelyezni. A következő 4 értéket veszi fel:

  1. rowa fő tengely alapértelmezett értéke, amely balról jobbra mutat. A kereszttengely fentről lefelé marad.
  2. row-reversemegfordítja a sor irányát jobbról balra. Ismét a kereszttengely nem változik.

3. columnmegváltoztatja a fő tengelyt a vízszintes tengelyről a függőleges tengelyre. Ez azt jelenti, hogy a főtengely most felülről lefelé áramlik, míg a kereszttengely most balról jobbra áramlik.

4. column-reversehasonló az oszlop értékéhez, azzal az egyetlen különbséggel, hogy a főtengely mostanra alulról felfelé folyik.

Flex-wrap

A flex-container alapértelmezés szerint nem teszi lehetővé, hogy az elemek egymás után több sort is felvegyenek. Ehelyett az összes elemet fel kell osztani, hogy egy sorba illeszkedjen, vagyis nem teszi lehetővé több sorba csomagolást.

  1. flex-wrap: no-wrap az alapértelmezett.

2 flex-wrap: wrap. A tulajdonság megváltoztatásával wrapmost biztosíthatjuk, hogy minden rugalmas elem megtartsa a saját méretét. Ha nem férnek el egy vonalon, akkor a hajlítási iránytól függően a következő sorba vagy oszlopba burkolnak.

Ha a hajlítás irányát visszafelé állították be, akkor az elemek jobbról balra indulva a következő sorra kerülnek.

3. wrap-reversemásrészt a következő flex sorokat az eredeti fölé tekeri, még mindig balról jobbra.

Igazol-tartalom

Ezt a tulajdonságot nagyon gyakran használják. Célja, hogy a főtengely mentén elosztja a helyet a hajlékony elemek között egy hajlékony tartályban . Az alapértelmezett érték az flex-start.

Ne feledje: Ha a hajlítási irány oszlopra van állítva, akkor a fő tengely fentről lefelé áramlik. Ez azt jelenti, hogy az igazoló tartalom most vertikálisan terjeszti az elemeket.

Tételek igazítása

Ez a tulajdonság ugyanolyan népszerű, mint justify-contenta flexbox rendszeresen. Ugyanazt csinálja, mint justify-contentazzal az egyetlen különbséggel, hogy a kereszttengely mentén működik . Az alapértelmezett érték align-itemsaz stretch.

Ne feledje: Ha a hajlítási irány oszlopra van állítva, akkor a kereszttengely most balról jobbra áramlik. Ez azt jelenti, hogy az igazító elemek mostantól horizontálisan osztják szét az elemeket.

Align-content

Ez a tulajdonság hasonló és könnyen összetéveszthető vele align-items. Ennek a tulajdonságnak az a célja, hogy meghatározza, hogyan kell elosztani a flex-konténer sorai közötti teret a kereszttengely mentén .

Míg align-itemsa flex-elemek közötti teret align-contentcélozza, addig az elemek közötti sorokat. Az alapértelmezett érték align-contentaz stretch.

Flex elem tulajdonságai

Ideje áttérni a második típusú flexbox tulajdonságokra, amely lehetővé teszi számunkra, hogy az egyes elemeket megcélozzuk egy flex tárolóban.

Align-én

Ez a tulajdonság lehetővé teszi egy egyedi flexibilis elem igazítását a kereszttengely mentén. Felülírja a tárolóhoz beállított igazítást align-items.

Ugyanazt a tulajdonságot veszi fel, mint align-items(lásd fent).

Rendelés

Ez a tulajdonság lehetővé teszi számunkra, hogy újrarendezzük az egyes flex-elemek helyzetét a flex-tartályukban. Alapértelmezés szerint minden elemhez 0 érték tartozik.

Ha orderaz egyes tételeknél alacsonyabb (-ve) vagy nagyobb (+ ve) értéket rendel hozzá , akkor az adott elem az értékeik szerint kerül elhelyezésre.

A sorrend a leglogikusabb konvenciót követi, azaz -ve, 0, + ve. A legkisebb szám a bal szélső, a legnagyobb pedig a jobb szélső lesz, feltéve, hogy minden mást alapértelmezettként állítottunk be. Ha vannak olyan elemek, amelyekhez nincs új érték hozzárendelve, azok 0-ként maradnak.

Megjegyzés: A fenti példa 1., 2., 5. és 6. mezője továbbra is az alapértelmezett 0 értéket tartalmazza. A pontosítás érdekében a fenti hat mező a következő értékekkel rendelkezik: -1, 0, 0, 0, 0, 1 .

Ha egy dobozt a 4-es doboz elé akar helyezni, akkor a célzott mezőt -2 vagy alacsonyabb sorrendben kell beállítania.

Flex -alapú, Flex-grow és Flex-Shrink

Eddig az összes rugalmas elem mérete azonos volt. Most nézzük meg, hogyan lehet egy adott flex-elemet több helyet foglalni a flex-tartály belsejében, mint az ugyanabban a tartályban lévő többi elem.

Flex-alapú

Ez a tulajdonság megadja a rugalmas elem ideális méretét, mielőtt azt egy flex tartályba helyeznék. A szélességhez hasonlóan működik, ha sorokkal dolgozik. Oszlopokkal történő munkavégzéskor magasságként működik. Tehát, ha oszlopokkal dolgozunk, és egy elem magasságot és rugalmas alapot egyaránt kapott, akkor a rugalmas alap lesz az elsőbbség, mivel ez az az ideális magasság, amelyet a rugalmas elem akkor vesz el, ha elegendő hely áll rendelkezésre.

Ennek ellenére, ha nincs elég hely, és nincs hozzárendelve magasság vagy szélesség az elemekhez. Az elemek a tárolóban elérhető maximális magasságot vagy maximális szélességet veszik figyelembe.

Rugalmasan növekszik

Ez a tulajdonság meghatározza, hogy a flex-elemek hogyan növekedhetnek annak érdekében, hogy kitöltsék a kihasználatlan helyet egy flex-tartályban.

Ha flex-grow: 1az összes mezőhöz a- t rendelünk , akkor azok egyenletesen veszik el a fennmaradó helyet, ami egyben az alapértelmezett értéke. A szám bármi lehet, amennyiben mind azonos szám.

Ha flex-grow: 1egy tételnek adunk, a másodiknak pedig a-t adunk flex-grow: 2, akkor a második elem kétszer annyi fel nem használt helyet foglal el, mint az első.

Ez vonatkozik mind a sorokra, mind az oszlopokra.

Rugalmasan zsugorodik

Ez a tulajdonság határozza meg, hogy a flex-elemeket is zsugorodik, ha van nem elég hely egy flex-tartályba.

Ez flex-shrink: 1az alapértelmezett érték, vagyis alapértelmezés szerint minden elem ugyanolyan ütemben zsugorodik.

Megjegyzés:flex-shrink: 0; azt jelenti, hogy ennek a konkrét elemnek soha nem szabad zsugorodnia.

flex-shrink: 2; azt jelenti, hogy ennek a konkrét elemnek gyorsabban kell zsugorodnia, mint a többi flex-shrink: 1;

Flex

Ez a rugalmas változat a rugalmas növekedés, a rugalmas összehúzás és a rugalmas alap alapján az adott sorrendben.

Ha mindhárom fentieket fel kell használnia, egyszerűen használhat ilyesmit:

flex: 0 2 200px; ahol 0 a flex-növekedésre, 2 a flex-shrinkra és 200px a flex alapra vonatkozik.

Gratulálunk!

Ez az! Ezek a legfontosabb összetevők a flex mesterré váláshoz. És mint minden más dologban az életben és a kódban, a gyakorlat is eredményessé válik. Nagyon ajánlom ennek az útmutatónak a gyakorlati megvalósítását a gyakorlati megértés érdekében. Az egyik példa lehet kezdeni valamivel, például egy egyszerű navigációs sávval.

Megnézheti a Codepen-gyűjteményem linkjét a flex-boxon, amelyet a fenti képeken létrehoztam, és megcsíptem őket, hogy lássam, hogyan változnak.

Köszönjük, hogy elolvasta ezt az útmutatót a flexboxon. Remélem, hogy hasznos és informatív volt. Ha bármilyen kérdése van, vagy meg szeretné osztani gondolatait ebben a témában, kérjük, forduljon hozzánk bizalommal a megjegyzések részben vagy e-mailben a [email protected] címen.

Ha értékesnek találta ezt az olvasmányt, kérjük, mutassa meg a cikknek némi szeretetet, néhány tapsot hátrahagyva, hogy más fejlesztők is megtalálják.

ZeeshaanMaudar - Áttekintés

Szórakoztató kód Változtatás kódja Szociális javak kódja - ZeeshaanMaudar github.com