Arbejde med Flex-Elementer

Flex-elementer er børn af flex-containeren. De er ikke længere inline- eller blokniveau-elementer. Derfor kan vi ændre elementegenskaber for at opnå korrekt placering.

flex-basis

]flex-basis] definerer den oprindelige størrelse af et flex-element, før ekstra plads fordeles. Det kan angives med px, %, em eller auto (størrelse baseret på indhold).

flex-basis: auto | value;

flex-grow

Egenskaben flex-grow bestemmer, hvor meget et flex-element kan vokse i forhold til andre elementer i en flex-container, når der er overskydende plads til rådighed.

Egenskaben flex-grow accepterer en enhedsløs værdi, der angiver den relative størrelse af flex-elementet sammenlignet med andre elementer. For eksempel, hvis et element har en flex-grow-værdi på 2, og et andet har en værdi på 1, vil det første element vokse dobbelt så meget som det andet element, når der er overskydende plads i flex-containeren.

order

Egenskaben order bruges til at definere visningsrækkefølgen af flex-elementer inden for deres container. Som standard vises flex-elementer i den rækkefølge, de optræder i HTML-dokumentet. Vi kan dog ændre denne rækkefølge ved hjælp af order-egenskaben.

Værdien for order kan være et hvilket som helst tal. Selv hvis vi kun har 3 elementer, betyder det ikke, at vi får 1000 elementer, hvis vi tildeler order: 1000; til det andet element. Det betyder blot, at det andet element placeres på den sidste position. Hvis nogle elementer har samme order-værdi, vil browseren placere dem i den rækkefølge, de optræder i HTML-dokumentet. Lad os omarrangere order for elementerne i følgende liste. Opgaven er at placere det tredje element på første position.