Flex - CSS-trükkök

Az flexingatlan a Flexible Box Layout modul egyik al-tulajdonsága.

Ez a rövidítés flex-grow, flex-shrinkés flex-basis. A második és a harmadik paraméter ( flex-shrinkés flex-basis) nem kötelező.

Szintaxis

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

Íme a gombóc az értékek leképezéséhez attól függően, hogy hány értéket ad neki:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

Közös értékei a flex

flex: 0 auto;

Ez ugyanaz, mint flex: initial;a rövidítése az alapértelmezett érték: flex: 0 1 auto. Az elemet width/ heighttulajdonságai (vagy tartalma alapján állítja be, ha nincs beállítva).

Rugalmatlanná teszi a flex elemet, ha van egy kis szabad hely, de lehetővé teszi a minimálisra zsugorodását, ha nincs elég hely. Az igazítási képességek vagy automargók felhasználhatók a hajlékony elemek igazításához a fő tengely mentén.

flex: auto;

Ez egyenértékű flex: 1 1 auto. Vigyázat, ez nem az alapértelmezett érték. Az elemet width/ heighttulajdonságai alapján méretezi , de teljes mértékben rugalmassá teszi, hogy a főtengely mentén felesleges helyet vegyen fel.

Ha az összes elem vagy flex: auto,, flex: initialvagy flex: none, az elemek méretezése után a fennmaradó hely egyenletesen oszlik el a elemekkel a flex: auto.

flex: nincs;

Ez egyenértékű flex: 0 0 auto. Az elemet width/ heighttulajdonságai szerint méretezi , de teljesen rugalmatlanná teszi.

Ez hasonló ahhoz flex: initial, hogy túlcsordulás esetén sem szabad zsugorodni.

Flex:

Ezzel egyenértékű flex: 1 0px. Rugalmassá teszi a flex elemet, és nulla értékre állítja a flex alapot, aminek eredményeként egy elem megkapja a fennmaradó hely meghatározott hányadát.

Ha a rugalmas tárolóban lévő összes elem használja ezt a mintát, méretük arányos lesz a megadott flex tényezővel.

Demó

A következő bemutató nagyon egyszerű elrendezést mutat be a Flexbox segítségével az flexingatlannak köszönhetően :

Itt van a kód reveláns bitje:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

Először engedélyeztük a flex elemeket, hogy több sorban jelenjenek meg a flex-flow: row wrap.

Ezután mind a fejlécnek, mind a láblécnek azt mondjuk, hogy a jelenlegi nézetablak szélességének 100% -át vegye fel, nem számít, mi.

És a fő tartalom és mindkét oldalsáv ugyanazt a sort osztja meg, megosztva a fennmaradó helyet az alábbiak szerint: 66% (2 / (1 + 2)) a fő tartalomhoz, 33% (1 / (1 + 2)) az oldalsávhoz .

Böngésző támogatás

• (modern): a specifikáció legújabb szintaxisa (pl. display: flex;)
• (hibrid) furcsa, nem hivatalos szintaxist jelent 2011-től (pl. display: flexbox;)
• (régi) a 2009-es régi szintaxist jelenti (pl. display: box;)

Króm	Szafari	Firefox	Opera	AZAZ	Android	iOS
21+ (modern) 20 - (régi)	3.1+ (régi)	2–21 (régi) 22+ (új)	12,1+ (modern)	10+ (hibrid)	2.1+ (régi)	3,2+ (régi)

A Blackberry 10+ böngésző támogatja az új szintaxist.

Ha többet szeretne tudni a szintaxisok keveréséről a legjobb böngészőtámogatás érdekében, olvassa el ezt a cikket (CSS-trükkök) vagy ezt a cikket (DevOpera).