Arbeide med Flex-elementer

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

flex-basis

]flex-basis] definerer startstørrelsen til 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 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-elementer 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 kun har 3 elementer, betyr det ikke at vi får 1000 elementer dersom vi setter order: 1000; på det andre elementet. Det betyr bare at det andre elementet vil plasseres 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.