HTML - Flexbox & Position

Standardvärdet för flex-direction?

row (boxarna ligger bredvid varandra)

Hur låter man flexboxar hoppa ner till ny rad?

flex-wrap: wrap;

Vad gör flex-basis: 200px;?

Boxen försöker vara 200px bred om den får plats, annars blir den mindre

Box A har flex-grow: 2 och box B flex-grow: 1. Vad händer?

A får dubbelt så mycket av extraplatsen som B

Vad betyder flex-shrink: 0;?

Boxen får inte krympa

En bild har float: left;. Var hamnar texten efter?

Till höger om bilden, runt den

Rubriken ska hamna under en bild som flyter vänster och en som flyter höger. Vad skriver du?

clear: both;

Vilken position är samma som att inte skriva någon position?

static

position: static och top/left?

top/left fungerar inte med static

Vad gör position: relative?

Elementet ligger kvar på sin plats men kan flyttas med top/left från den platsen

Vad gör position: absolute?

Elementet tas ur flödet och placeras utifrån närmaste förälder med position: relative, annars hela sidan

"Tas ur flödet" betyder?

Andra element beter sig som att elementet inte finns

absolute utan någon förälder med relative placeras utifrån?

Hela sidan

Vad gör position: fixed?

Elementet sitter fast i fönstret och rör sig inte när du scrollar

Vad gör position: sticky?

Beter sig normalt tills du scrollar förbi det, sedan fastnar det

Skillnad fixed och sticky?

fixed sitter alltid fast i fönstret, sticky är normal tills du scrollar förbi och fastnar då

Exempel på när man använder fixed?

En meny eller knapp som alltid syns, t.ex. "tillbaka upp"-knapp

Exempel på när man använder sticky?

En rubrik eller meny som fastnar högst upp när du scrollar förbi den

Sticker "NY!" i hörnet på ett kort, vilken kod?

Kortet: position: relative; Stickern: position: absolute; top: 10px; right: 10px;

Varför position: relative på föräldern till ett absolute-element?

Så absolute-elementet placeras utifrån föräldern istället för hela sidan

top: 20px; på ett absolute-element betyder?

Elementets överkant ligger 20px från förälderns överkant

Absolute med top, bottom, left och right men ingen width/height?

Boxen sträcks ut mellan kanterna, kanterna bestämmer storleken

Absolute med top: 10px, bottom: 10px, left: 10px, right: 10px?

Nästan lika stor som föräldern (små avstånd = stor box)

Absolute med bara top och left?

Boxen flyttas bara, storleken kommer från width och height

Varför display: block; på nav a?

Länkarna fyller hela bredden och blir lika breda (a är annars inline)

Vad gör nav a:hover?

Ändrar stilen när musen är över länken

Vad gör nav a.thisPage?

Markerar länken för sidan du är på

Hamburgermeny: vad används för att visa/dölja menyn?

En dold kryssruta (checkbox) och en ikon (label) kopplad till den

Hur kopplas ikonen till kryssrutan?

label har for="menucheckbox" och input har id="menucheckbox"

Vad händer när man klickar på hamburgerikonen?

Den dolda kryssrutan bockas i eller ur

Vad betyder :checked?

Regeln gäller när kryssrutan är ibockad

Vad gör #menucheckbox ~ ul { display: none; }?

Döljer menyn när kryssrutan inte är ibockad

Vad gör #menucheckbox:checked ~ ul { display: flex; }?

Visar menyn när kryssrutan är ibockad

Vad betyder ~ i #menucheckbox ~ ul?

ul-element som ligger efter #menucheckbox

Varför behöver label width, height och background-image?

Den har inget innehåll, så utan storlek syns inte ikonen

Varför cursor: pointer på hamburgerikonen?

Så användaren ser att den går att klicka på