Flex-elementer er barn av flex-beholderen. De er ikke lenger inline- eller blokk-nivå-elementer. Derfor kan vi endre elementegenskaper for å oppnå korrekt posisjonering.

flex-basis

Egenskapen flex-basis definerer startstørrelsen til et flex-element før eventuell gjenværende plass fordeles. Den angir den ideelle størrelsen til et flex-element, som kan justeres avhengig av tilgjengelig plass og andre egenskaper for flex-beholderen.

flex-basis: auto | value;

Du kan angi størrelsen med piksler, prosent eller em for å spesifisere ønsket størrelse, eller sette den til auto, som lar nettleseren bestemme størrelsen basert på innholdet i elementet.

flex-grow

Egenskapen flex-grow bestemmer hvor mye en flex-item kan vokse i forhold til andre elementer i en flex-container når det er ledig plass tilgjengelig.

Egenskapen flex-grow aksepterer en enhetsløs verdi som angir den relative størrelsen på flex-elementet sammenlignet med andre elementer. For eksempel, hvis ett element har en flex-grow-verdi på 2, og et annet har en verdi på 1, vil det første elementet vokse dobbelt så mye som det andre elementet når det er ledig plass i flex-containeren.

order

Egenskapen order brukes til å definere visningsrekkefølgen for flex-elementer innenfor deres beholder. Som standard vises flex-elementene i den rekkefølgen de forekommer i HTML-dokumentet. Vi kan imidlertid endre denne rekkefølgen ved å bruke order-egenskapen.

Verdien for order kan være et hvilket som helst tall. Selv om vi bare har 3 elementer, betyr det ikke at vi får 1000 elementer hvis vi setter order: 1000; på det andre elementet. Det betyr bare at det andre elementet vil bli plassert sist. Dersom flere elementer har samme order-verdi, vil nettleseren plassere dem i den rekkefølgen de forekommer i HTML-dokumentet. La oss endre order på elementene i listen under. Målet er å plassere det tredje elementet først.