Még többet a Flexbox működéséről - nagy, színes, animált gifekkel magyarázva

Legutóbb a Flexbox alapvető tulajdonságait kezdtük meg: flex-direction, justify-content, align-items és align-self.

Ezek a parancsok hatékonyak az alapvető elrendezések létrehozásához. De miután elkezdi a weboldalak készítését a Flexbox segítségével, akkor mélyebbre kell mennie, hogy maximalizálja a benne rejlő lehetőségeket.

Vizsgáljuk meg most alaposan a Flexbox méretezését - és hogyan használhatjuk fel azt alkalmazkodó és gyönyörű elrendezések elkészítéséhez.

1. tulajdonság: Flex-Basis

Az utolsó cikkben leginkább azokat a tulajdonságokat vizsgáltuk, amelyek a konténerelemekre vonatkoznak. Ezúttal kizárólag a gyermekelemekre alkalmazott méretezést vizsgáljuk meg.

Az első tulajdonságunk véleményem szerint az egyik legkevésbé megmagyarázott tulajdonság a Flexbox oktatóanyagokban.

De - ne aggódj. Valójában egészen egyszerű.

A Flex- based szabályozza az elem alapértelmezett méretét, mielőtt más Flexbox tulajdonságok manipulálnák (erről bővebben később).

Az alábbi GIF-ben ez azt jelenti, hogy felcserélhető a szélesség tulajdonsággal:

A flex-bázist a szélességtől azonban egyedivé teszi, hogy megfelel jó ol 'flex tengelyeinknek:

A rugalmas alap befolyásolja az elem méretét a fő tengelyen.

Lássuk, mi történik, ha a rugalmas alapjainkat megtartjuk, de megváltoztatjuk a fő tengelyünk irányát:

Ne feledje, hogy a magasság kézi beállításáról a szélesség beállítására kellett váltanunk. A flex-based így váltakozva határozza meg a szélességet vagy a magasságot, a flex irányától függően.

2. tulajdon: Flex Grow

Most egy kicsit összetettebbé válunk.

Először állítsuk be az összes négyzetünket azonos szélességűre, 120 képpontra:

Most, amikor a flex-grow nevű tulajdonságról van szó , az alapértelmezett érték 0 . Ez azt jelenti, hogy a négyzetek nem nőhetnek, hogy elfoglalják a tartályban lévő helyet.

Az mit jelent? Nos, próbáljuk meg növelni a rugalmas növekedést 1- re minden négyzetnél:

A négyzetek együttesen elfoglalják a tartály teljes szélességét, a tér egyenletesen oszlik el közöttük. A flex-grow érték felülírja a szélességet.

A flex-növekedés zavaros része azonban az, amit az érték valójában jelent. Mit jelent a flex-grow: 1 valójában?

Nos, így néz ki, ha az egyes négyzetek rugalmas növekedését 999-re állítjuk:

Pontosan ugyanaz.

Ez azért van, mert a flex-grow nem abszolút érték, hanem relatív érték.

Nem az számít, hogy mi a négyzet rugalmas növekedési értéke, hanem az, hogy mi a többi négyzet.

Ha minden négyzetet flex-növekedésre állítunk: 1, majd a 3. négyzet rugalmas növekedését állítjuk be, akkor látjuk a változásokat:

Hogy valóban megértsük, mi folyik itt, tegyünk egy gyors kitérőt néhány (egyszerű) matekba.

Minden négyzet 1-es flex-növekedéssel kezdődik. Ha összeadjuk az egyes négyzetek flex-növekedését, az összesítésünk hat. A tartály így 6 külön részre oszlik. Minden négyzet növekszik, hogy kitöltse a tartályban rendelkezésre álló hely 1/6-át.

Amikor a 3-as négyzet flex-növekedését 2-re állítjuk, a tartály most 7 különböző szakaszra oszlik, mivel a flex-grow tulajdonságok összessége 1 + 1 + 2 + 1 + 1 + 1.

A 3. tér akkor kapja ennek a térnek a 2/7-ét, a többi pedig 1/7-et.

Amikor hajlékony növekedésre megyünk: 3 a 3. térnél, a tartály 8 részre oszlik (1 + 1 + 3 + 1 + 1 + 1), a 3. tér pedig 3/8-ra, a többi pedig 1/8-ra .

Stb.

A flex-grow az arányokról szól . Ha minden négyzetet flex-növekedésre állítunk: 4 és a # 3 négyzetet flex-növekedésre: 12, akkor ugyanazt az eredményt kapjuk, mintha 1, illetve 3 lenne:

Fontos, hogy az egyes négyzetek rugalmas növekedése arányos-e a többivel.

Utolsó megjegyzésként ne feledje, hogy a flex-növekedéshez hasonlóan a rugalmas növekedés a fő tengelyen át érvényes. Négyzeteink csak szélesség szerint növekednek, hacsak nem a hajlítási irányt állítjuk oszlopra.

3. tulajdon: Flex Shrink

A flex-shrink a flex-növekedés ellentéte, amely meghatározza, hogy egy négyzet mennyire zsugorodik.

Csak akkor jön szóba, ha az elemeknek zsugorodniuk kell, hogy beilleszkedjenek a tartályukba - azaz amikor a tároló csak túl kicsi.

Legfőbb felhasználása annak meghatározása, hogy mely elemeket szeretné csökkenteni, és melyeket nem. Alapértelmezés szerint minden négyzet flex-zsugorodása 1 - ami azt jelenti, hogy csökken, amint a doboz összehúzódik.

Lássuk működés közben. Az alábbi GIFS-ben a négyzetek rugalmas növekedése 1, tehát kitölti a tartályt, és 1 flexibilis zsugorodása, tehát megengedik, hogy ugyanúgy csökkenjen.

Most állítsuk a 3. négyzet rugalmas zsugorodását 0-ra. Tilos zsugorodni, ezért amíg nő, hogy illeszkedjen a tartályhoz, nem hajlandó a beállított 120 képpontos szélesség alá süllyedni.

A flex-shrink alapértelmezett értéke 1 - ez azt jelenti, hogy az elemei addig fognak zsugorodni, amíg meg nem szólítja őket!

A flex-shrink megint csak arányos. Ha az egyik doboz flex-zsugorodása 6, a többieké pedig a flex-shrink értéke 2, akkor az egyik doboz 3x olyan gyorsan zsugorodik, mint a többi, mivel a hely összenyomódik.

Vegye figyelembe az ottani megfogalmazást: a háromszoros flexibilis zsugorítású négyzet olyan gyorsan zsugorodik. Ez nem azt jelenti, hogy a szélesség 1/3-át csökkenti.

Egy pillanat múlva mélyebben belemerülünk, hogy mennyi dolog zsugorodik és nő. De előbb térjünk rá az utolsó ingatlanunkra, és hozzunk össze mindent.

4. tulajdonság: Flex

A Flex rövidítés a növekedés, a zsugorodás és az alap szempontjából - mindezt együttvéve.

Alapértelmezés szerint 0 (növekszik) 1 (zsugorodik) és automatikus (alap).

Utolsó példánkban egyszerűsítsünk két mezőt.

Itt vannak a tulajdonságaik:

.square#one { flex: 2 1 300px;}
.square#two { flex: 1 2 300px;}

Mindkettőnek ugyanaz a rugalmas alapja. Ez azt jelenti, hogy ha elegendő hely van mindkettőjük számára (a tartály 600 képpontos, plusz hely a margók és a párnázás számára), akkor mindkettő 300 képpont széles lesz.

De ahogy a doboz növekszik, az 1. négyzet (a nagyobb flex-növekedéssel) kétszer olyan gyorsan növekszik. Amint a doboz összehúzódik, a 2. négyzet (a nagyobb hajlító-zsugorodással) kétszer olyan gyorsan fog zsugorodni.

Most együtt:

Hogyan zsugorodnak és nőnek a dolgok

Íme, ami zavaró lehet: amikor az 1. négyzet növekszik, nem lesz kétszer akkora, mint a 2. tér. Hasonlóképpen, amikor a 2. tér zsugorodik, akkor sem zsugorodik, hogy fele akkora legyen, mint az 1. tér - annak ellenére, hogy az arány a flex-shrink értéke 2: 1.

Nem a méretük 2: 1 vagy 1: 2, hanem zsugorodásuk és növekedésük aránya.

Egy kis matek

A tartály kezdő mérete 640 képpont. Miután a tartály mindkét oldalán 20 képpontos párnázás történt, ez elegendő helyet hagy mindkét négyzet számára, hogy visszatérjen a 300 képpontos rugalmas alapra

Ha a tároló 430 képpontos értékre van állítva, 210 képpontnyi helyet veszítettünk . Az 1. négyzet, az 1-es flex-zsugorítással, elveszíti a 70 képpontot . A 2. négyzet a 2-es flex-zsugorítással 140 képpontot veszít .

Amikor a tartály zsugorodik 340px, mi már most elvesztette 300px helyet. Tér 1. veszít 100px , tér 2 veszít 200px .

Az elveszett helyet felosztják a megfelelő flex-zsugorításuk arányának megfelelően (2: 1).

Ugyanez a történet a rugalmas növekedéssel. Amikor a tartály növekszik 940px, és már szerzett 300px tér, tér 1. kap egy extra 200px és tér 2 kap egy extra 100px .

Ha a flex tulajdonságokról van szó, akkor az arányok a játék neve.

A fenti GIF-ben láthatja, hogyan állítja be a szélesség az arányok szerint, a delta (∆) mutatja a különbséget a flex-bázistól.

Következtetés

Végső összefoglalásként: a flex-based szabályozza, hogy egy elem mekkora lesz a főtengely mentén, mielőtt bármilyen növekedés vagy zsugorodás bekövetkezne. A rugalmas növekedés határozza meg, hogy mennyit fog nőni a testvérelemek arányában, a flex-shrink pedig azt, hogy mennyit fog zsugorodni.

Van még néhány Flexbox tulajdonságunk, amelyeket fedeznünk kell - figyeljen erre a következő hetekben.

Nagyon köszönöm, hogy elolvastad! A válasz ezekre a cikkekre elsöprő. Nagyon értékelem, hogy mindenki szán időt arra, hogy elolvassa, megválaszolja, ajánlja és megossza!

Ha van egy bizonyos koncepció (Flexbox vagy más), amelyet szeretne látni magyarázni egy hasonló cikkben, hagyjon választ vagy tweeteljen. Kövess engem a Twitteren és a Mediumon is (az alábbi követés gombra kattintva).