Webbteknik 1 - Laboration L5a

Flexbox är en teknik att placera element i kolumner eller rader. Med olika egenskaper kan man få elementen att flexibelt anpassa sig till varandra eller tillgängligt utrymme. Du ska nu experimentera med dessa egenskaper.

17 min.

Följande är förslag på övningar. Experimentera gärna med egna förändringar, så att du lär dig hur egenskaperna fungerar.

Förberedelser

Öppna mappen L5a (som finns i L5) i Visual Studio Code (VSC).
Öppna filen index.html och style.css i VSC samt öppna sidan i Live Server.
Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den.

Flex i det omgivande elementet

Lägg in display: flex; i regeln för .wrapper, dvs för det element som omger boxarna.
- Boxarna läggs då på en rad intill varandra bredden på dem anpassas, så att de får plats.
Lägg också in gap: 20px; för att få ett litet avstånd mellan boxarna.
Lägg in flex-direction och prova olika värden, behåll sedan värdet row (som också är "default"-värdet).
Lägg in flex-wrap och prova olika värden. Behåll sedan värdet wrap.
- Ta fram Följsamt designläge i Firefox och prova att göra fönstret smalare och se hur boxarnas placering förändras.
Lägg in justify-content och prova med olika värden.
- Prova speciellt center, flex-start, flex-end, space-between och space-evenly.
  - Det finns även andra värden, men alla får ingen effekt i just detta läget, utan syns tydligare då man också lagt in egenskaper på boxarna eller om man har ett fåtal boxar, så att inte hela det omgivande utrymmet fylls.
Lägg in align-items och prova med olika värden.
- Prova speciellt center, flex-start, flex-end och stretch.

Flex för boxarna

Sätt först flex-direction till row och flex-wrap till wrap i regeln för .wrapper, så kommer du se effekten av de följande punkterna bättre.
Lägg in flex-basis: 200px; i regeln för .wrapper div.
- Detta är den bredd, som boxarna ska försöka ha, om de får plats.
Ändra till flex-wrap: nowrap; i regeln för .wrapper
Lägg in flex-shrink: 0; i regeln för .wrapper div.
- Med värdet 0 anges att boxarna inte får krympa.
- Ändra till värdet 1 och se skillnaden.
Ändra tillbaks till flex-wrap: wrap; i regeln för .wrapper
Lägg in flex-grow: 0; i regeln för .wrapper div.
- Med värdet 0 anges att boxarna inte får växa.
- Ändra till värdet 1 och se skillnaden.
Ta fram Följsamt designläge i Firefox och prova att göra fönstret smalare och bredare. Prova med olika kombinationer av 0 och 1 i flex-shrink och flex-grow, för att se hur boxarna förändras, då du gör fönstret smalare eller bredare.

Krympa eller växa olika mycket

Denna effekt syns bäst om du har ett mindre antal boxar på en rad. Så ta bort box 4 till 7 i HTML-koden (sätt kommentartecken kring dem). I regeln för .wrapper ser du till att du har flex-direction: row; och flex-wrap: nowrap;
I regeln för .wrapper div ser du till att du har flex-shrink: 0; och flex-grow: 1;
Lägg in flex-grow: 4; i regeln för #box2. Då bör du se att box 2 blir bredare än de andra boxarna.
Ta fram Följsamt designläge i Firefox och prova att göra fönstret smalare och bredare.
- Boxarna krymper ner till samma storelek, men då fönstret blir bredare och boxarna växer, så växer box 2 lite mer.
Prova nu också att göra liknande test med flex-shrink.
Prova gärna också att lägga olika värden för flex-basis, flex-shrink och flex-grow i reglerna för de olika boxarna.

Ändra ordning

Lägg in order: 1, order: 2, etc. i reglerna för #box1, #box2, etc. Detta ger då den ordning de ursprungligen har.
Byt ordning, genom att byta siffrorna i order till önskad ordning.

Klar

Gå nu vidare med föreläsning F5b och därefter laboration L5b.