De flex
eigenschap is een subeigenschap van de module Flexible Box Layout.
Dit is de afkorting voor flex-grow
, flex-shrink
en flex-basis
. De tweede en derde parameter ( flex-shrink
en flex-basis
) zijn optioneel.
Syntaxis
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 */ )
Hier is de primeur over waar de waarden naar toewijzen, afhankelijk van het aantal waarden dat u eraan geeft:
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
Gemeenschappelijke waarden voor flex
flex: 0 auto;
Dit is hetzelfde als flex: initial;
en de afkorting voor de standaardwaarde: flex: 0 1 auto
. Het formaat van het item op basis van zijn width
/ height
eigenschappen (of de inhoud indien niet ingesteld).
Het maakt het flexitem inflexibel als er nog wat vrije ruimte over is, maar laat het krimpen tot een minimum als er niet genoeg ruimte is. De uitlijnmogelijkheden of auto
marges kunnen worden gebruikt om flexitems langs de hoofdas uit te lijnen.
flex: auto;
Dit is gelijk aan flex: 1 1 auto
. Pas op, dit is niet de standaardwaarde. Het maakt het item op maat op basis van zijn width
/ height
eigenschappen, maar maakt het volledig flexibel zodat ze extra ruimte langs de hoofdas absorberen.
Als alle items een flex: auto
, flex: initial
of zijn flex: none
, wordt de resterende ruimte nadat de grootte van de items is bepaald, gelijkmatig over de items met verdeeld flex: auto
.
flex: geen;
Dit is gelijk aan flex: 0 0 auto
. Het past het item aan op basis van zijn width
/ height
eigenschappen, maar maakt het volledig onbuigzaam.
Dit is vergelijkbaar met, flex: initial
behalve dat het niet mag krimpen, zelfs niet in een overloopsituatie.
buigen:
Gelijk aan flex: 1 0px
. Het maakt het flexartikel flexibel en stelt de flexbasis in op nul, wat resulteert in een item dat het gespecificeerde deel van de resterende ruimte ontvangt.
Als alle items in de flexcontainer dit patroon gebruiken, zijn hun maten evenredig met de gespecificeerde flexfactor.
Demo
De volgende demo toont een zeer eenvoudige lay-out met Flexbox dankzij de flex
eigenschap:
Hier is het onthullende stukje code:
.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )
Ten eerste hebben we flex-items geautoriseerd om op meerdere rijen te worden weergegeven met flex-flow: row wrap
.
Vervolgens vertellen we aan zowel de koptekst als de voettekst om 100% van de huidige viewport-breedte te nemen, wat er ook gebeurt.
En de hoofdinhoud en beide zijbalken delen dezelfde rij, waarbij de resterende ruimte als volgt wordt gedeeld: 66% (2 / (1 + 2)) voor de hoofdinhoud, 33% (1 / (1 + 2)) voor de zijbalk .
Browser-ondersteuning
- (modern) betekent de recente syntaxis van de specificatie (bijv.
display: flex;
) - (hybride) betekent een vreemde onofficiële syntaxis uit 2011 (bijv.
display: flexbox;
) - (oud) betekent de oude syntaxis van 2009 (bijv.
display: box;
)
Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
---|---|---|---|---|---|---|
21+ (modern) 20- (oud) | 3.1+ (oud) | 2-21 (oud) 22+ (nieuw) | 12.1+ (modern) | 10+ (hybride) | 2.1+ (oud) | 3.2+ (oud) |
Blackberry browser 10+ ondersteunt de nieuwe syntaxis.
Raadpleeg dit artikel (CSS-Tricks) of dit artikel (DevOpera) voor meer informatie over het mixen van syntaxis om de beste browserondersteuning te krijgen.