Tenta: CSS layout flexbox

Vad är Flexbox?

Flexbox, eller flexibelt boxlayout, är en CSS-layoutmetod som främjar en effektiv layout av element i en container.

Fyll i tomrummet: Flexbox använder ________ för att justera element.

Flexbox använder flex-egenskaper som 'justify-content' och 'align-items' för att justera element.

Sant eller falskt: Flexbox fungerar endast för en kolumnlayout.

Falskt. Flexbox kan användas för både kolumn- och radlayouter.

Vilka egenskaper används för att styra riktningen i Flexbox?

Egenskaperna 'flex-direction' kontrollerar riktningen: row, column, row-reverse, column-reverse.

Vad gör 'justify-content'?

'justify-content' placerar flex-element horisontellt i förhållande till varandra.

Exempel: Hur centrerar du innehåll med Flexbox?

Använd: ```css .container { display: flex; justify-content: center; align-items: center; } ```

Vad är skillnaden mellan 'align-items' och 'align-content'?

'align-items' justerar flex-element inom en rad, medan 'align-content' justerar hela flex-rader.

Lista tre värden för 'flex-wrap'.

1. nowrap 2. wrap 3. wrap-reverse

Vad är 'flex-grow'?

'flex-grow' anger hur mycket ett flex-element ska växa i förhållande till andra flex-element.

Hur kan du skapa ett utrymme mellan flex-element?

Använd 'margin' på flex-elementen, t.ex. `margin: 10px;`.

Vad används 'flex-basis' till?

'flex-basis' anger den ursprungliga storleken på ett flex-element innan tillväxt eller krympning.

Ge ett exempel på hur man skapar en radlayout med Flexbox.

Använd: ```css .container { display: flex; flex-direction: row; } ```

Flexbox vs. Grid: Vad är skillnaden?

Flexbox är en layoutmetod för en-dimensionella arrangemang medan Grid hanterar två-dimensionella layouter.

Vad är en flex-container?

En flex-container är ett element med display: flex; vilket aktiverar flexbox-modellen för dess barn-element.

Justering av flex-element?

Använd CSS-egenskaper: justify-content, align-items, och align-self för att styra placeringen av flex-element.

Sant eller falskt: Flexbox är alltid det bästa valet.

Falskt, Flexbox är utmärkt för enkla arrangemang men Grid är bättre för komplexa layouter.

Vad betyder 'flex-grow'?

Flex-grow bestämmer hur mycket ett flex-element ska växa i förhållande till andra flex-element. Värdet är en skala, t.ex. 1, 2.

Fylla i blank: 'flex-direction' kan vara ______.

row, column, row-reverse, eller column-reverse.

Namnge en praktisk tillämpning av Flexbox.

Flexbox är idealiskt för responsiva navigationsmenyer som justerar sig efter skärmstorlek.

Vilka värden kan 'justify-content' ta?

- flex-start - flex-end - center - space-between - space-around

Vad gör 'align-items'?

Align-items justerar flex-elementen längs tvärgående axeln i flex-containern.

Exempel på flex-basis?

Exempel: Om ett element har flex-basis: 200px; kommer det att ha en grundläggande bredd på 200 pixlar.

Flex-item: Vad är 'order'?

'Order' bestämmer ordningen på flex-element, där lägre värden kommer först. Standard är 0.

Vad är en flex-item?

Ett flex-item är ett barn-element inom en flex-container, vilket kan anpassas med flexbox-egenskaper.