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

flex-basis

Egenskaben flex-basis definerer den indledende størrelse af et flex-item, før eventuel resterende plads fordeles. Den angiver den ideelle størrelse for et flex-item, som kan blive justeret afhængigt af den tilgængelige plads og andre egenskaber for flex-containeren.

flex-basis: auto | value;

Du kan definere størrelsen ved hjælp af pixels, procent eller ems for at angive den ideelle størrelse, eller sætte den til auto, hvilket lader browseren bestemme størrelsen baseret på elementets indhold.

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 ét 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-items inden for deres container. Som standard vises flex-items 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 har 1000 elementer, hvis vi tildeler order: 1000; til det andet element. Det betyder blot, at det andet element placeres på 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.