Werken met Flex-items

Flex-items zijn de kinderen van de flex-container. Ze zijn niet langer inline- of block-level elementen. Hierdoor kunnen we de eigenschappen van het item aanpassen om de juiste positionering te verkrijgen.

flex-basis

]flex-basis] bepaalt de initiële grootte van een flex-item voordat extra ruimte wordt verdeeld. Het kan worden ingesteld met px, %, em of auto (grootte gebaseerd op de inhoud).

flex-basis: auto | value;

flex-grow

De eigenschap flex-grow bepaalt het vermogen van een flex-item om te groeien ten opzichte van andere items binnen een flex-container wanneer er extra ruimte beschikbaar is.

De eigenschap flex-grow accepteert een eenheidsloze waarde die de relatieve grootte van het flex-item aangeeft ten opzichte van andere items. Ter illustratie: als één item een flex-grow waarde van 2 heeft en een ander een waarde van 1, zal het eerste item twee keer zoveel groeien als het tweede item wanneer er extra ruimte is in de flex-container.

order

De eigenschap order wordt gebruikt om de weergavevolgorde van flex-items binnen hun container te bepalen. Standaard worden flex-items weergegeven in de volgorde waarin ze in het HTML-document voorkomen. Met de eigenschap order kan deze volgorde echter worden aangepast.

De waarde van order kan elk getal zijn. Zelfs als er slechts 3 elementen zijn, betekent het toewijzen van order: 1000; aan het tweede element niet dat er 1000 elementen zijn. Het betekent simpelweg dat het tweede element op de laatste positie wordt geplaatst. Als meerdere elementen dezelfde order-waarde hebben, zal de browser ze weergeven in de volgorde waarin ze in het HTML-document staan. Laten we de order van items in de volgende lijst herschikken. De opdracht is om het derde item op de eerste positie te plaatsen.