0080 sidlayout

Sidlayouten i figuren nedan kan åstadkommas på flera sätt. Nedan beskrivs två sätt som var användbara före flexbox. Försöka att få samma resultat genom att använda flexbox. Gör uppgiften nedan men använd flexbox istället.

Aktuell uppgift

I mappen webbutveckling skapar du en ny mapp som heter 0080-sidlayout. Gör resten av uppgiften i denna mapp. Gör en sida som följer en av ovanstående mallar. Ta till exempel text och bild från uppgiften 0040 text och bild och lägg i elementet article. Lägg annan nonsenstext i aside och i header och footer.

Gamla sätt - använd flexbox istället

I den första varianten sätts css-egenskapen float till left för de element som ska ligga bredvid varandra. Därtill sätts bredden för elementen som ska ligga bredvid varandra. Lek med nedanstående exempel genom klicka på Edit in JSFiddle" i bilden nedan.

Det andra sättet att nå samma slutresultat är att låta elementen aside som är till vänster och höger om elementet article flyta till vänster och höger med float: left och float: right. För att få raka marginaler på elementet article sätts marginalerna till vänster och höger så att elementen aside får plats i denna.

Båda metoderna är användbara, men jag föredrar nog den första. Detta eftersom den lätt kan utvidgas från tre till fyra eller ännu fler kolumner.