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

Egenskapen flex-basis definierar den initiala storleken på ett flexobjekt innan återstående utrymme fördelas. Den anger den ideala storleken för ett flexobjekt, som kan justeras beroende på tillgängligt utrymme och andra egenskaper hos flexbehållaren.

flex-basis: auto | value;

Du kan ange storleken med pixlar, procent eller em för att specificera den ideala storleken, eller sätta den till auto, vilket låter webbläsaren bestämma storleken baserat på objektets innehåll.

flex-grow

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

Egenskapen flex-grow accepterar ett enhetslöst värde som anger den relativa storleken på flex-elementet jämfört med andra element. Till exempel, om ett element har värdet flex-grow 2 och ett annat har värdet 1, kommer det första elementet att växa dubbelt så mycket som det andra när det finns extra utrymme i flex-behå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 det inte att vi har 1000 element om vi tilldelar order: 1000; till det andra elementet. 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.