Mer flexbox: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) |
||
Rad 1: | Rad 1: | ||
= Avancerad styrning = | = Avancerad styrning = | ||
Det finns ett antal CSS-egenskaper som kan användas för att styra flexboxars layout och flöde. | Det finns ett antal CSS-egenskaper som kan användas för att styra flexboxars layout och flöde. | ||
== <code>flex-grow</code> | == <code>flex-grow</code> == | ||
Anger om flexboxarna ska kunna "växa till sig" och fylla upp tillgängligt utrymme. Som parameter tar denna egenskap en siffra som anger hur stor proportion av flex-utrymmet som elementet ska ta upp. Om alla element har detta värde satt till <code>1</code>, kommer de alla att bli lika stora. | Anger om flexboxarna ska kunna "växa till sig" och fylla upp tillgängligt utrymme. Som parameter tar denna egenskap en siffra som anger hur stor proportion av flex-utrymmet som elementet ska ta upp. Om alla element har detta värde satt till <code>1</code>, kommer de alla att bli lika stora. | ||
== <code>order</code> == | == <code>order</code> == | ||
Vanligtvis placeras flexelement ut efter varandra, allt eftersom de är angivna i HTML-koden. Men om man vill lägga in innehållet i en annan ordning kan man använda sig av <code>order</code>. Egenskapen tar ett heltal som parameter. De element som har lägst <code>order</code>-nummer kommer att placeras först. Lägg märke till att man kan ha flera element som har samma <code>order</coder>-nummer. De kommer då att placeras tillsammans som en grupp, är deras inbördes ordning bestäms av den ordning elementen angivits i HTML-koden. | Vanligtvis placeras flexelement ut efter varandra, allt eftersom de är angivna i HTML-koden. Men om man vill lägga in innehållet i en annan ordning kan man använda sig av <code>order</code>. Egenskapen tar ett heltal som parameter. De element som har lägst <code>order</code>-nummer kommer att placeras först. Lägg märke till att man kan ha flera element som har samma <code>order</coder>-nummer. De kommer då att placeras tillsammans som en grupp, är deras inbördes ordning bestäms av den ordning elementen angivits i HTML-koden. |
Versionen från 3 januari 2015 kl. 12.23
Avancerad styrning
Det finns ett antal CSS-egenskaper som kan användas för att styra flexboxars layout och flöde.
flex-grow
Anger om flexboxarna ska kunna "växa till sig" och fylla upp tillgängligt utrymme. Som parameter tar denna egenskap en siffra som anger hur stor proportion av flex-utrymmet som elementet ska ta upp. Om alla element har detta värde satt till 1
, kommer de alla att bli lika stora.
order
Vanligtvis placeras flexelement ut efter varandra, allt eftersom de är angivna i HTML-koden. Men om man vill lägga in innehållet i en annan ordning kan man använda sig av order
. Egenskapen tar ett heltal som parameter. De element som har lägst order
-nummer kommer att placeras först. Lägg märke till att man kan ha flera element som har samma order</coder>-nummer. De kommer då att placeras tillsammans som en grupp, är deras inbördes ordning bestäms av den ordning elementen angivits i HTML-koden.