Arbeta med Flexobjekt

Flexobjekt är barn till flexbehållaren. De är inte längre inline- eller blockelement. Därför kan vi ändra objektens egenskaper för att uppnå korrekt positionering.

flex-basis

]flex-basis] definierar den initiala storleken på ett flexobjekt innan extra utrymme fördelas. Det kan anges med px, %, em eller auto (storlek baserad på innehåll).

flex-basis: auto | value;

flex-grow

Egenskapen flex-grow bestämmer en flexitems förmåga att växa i förhållande till andra objekt inom en flexbehållare när det finns extra utrymme tillgängligt.

Egenskapen flex-grow accepterar ett enhetslöst värde som anger den relativa storleken på flexobjektet jämfört med andra objekt. Till exempel, om ett objekt har ett flex-grow-värde på 2 och ett annat har värdet 1, kommer det första objektet att växa dubbelt så mycket som det andra objektet när det finns extra utrymme i flexbehållaren.

order

Egenskapen order används för att definiera visningsordningen för flexobjekt inom deras behållare. Som standard visas flexobjekt i den ordning de förekommer i HTML-dokumentet. Vi kan dock ändra denna ordning med hjälp av egenskapen order.

Värdet för order kan vara vilket tal som helst. Även om vi bara har 3 element innebär tilldelningen order: 1000; till det andra elementet inte att vi får 1000 element. Det betyder helt enkelt att det andra elementet placeras sist. Om flera element har samma order-värde kommer webbläsaren att placera dem i den ordning de förekommer i HTML-dokumentet. Låt oss ändra order för objekten i följande lista. Uppgiften är att placera det tredje objektet på första plats.