Arbeide med Flex-elementer

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

]flex-basis] definerer den innledende størrelsen på et flex-element før ekstra plass fordeles. Den kan angis med px, %, em eller auto (størrelse basert på innhold).

flex-basis: auto | value;

flex-grow

Egenskapen flex-grow bestemmer hvor mye et flex-element kan vokse i forhold til andre elementer innenfor en flex-beholder 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-beholderen.

order

order-egenskapen brukes til å definere visningsrekkefølgen på flex-elementer innenfor beholderen sin. Som standard vises flex-elementer i den rekkefølgen de står 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 står i HTML-dokumentet. La oss endre order på elementene i listen under. Oppgaven er å plassere det tredje elementet først.