Sätta bredd på kolumner

Nästa steg blir att definiera bredden på kolumnerna beroende av hur många de är. Vi vill att kolumnerna skall ha en viss bredd när de visas bredvid varandra.

Vi vill att sidan skall se ut ungefär så här.

Bild: Nu har main och aside rimliga bredder.

×

Du kan åstakomma detta resultatet om du lägger till (längst ned) i din stylesheet, följande konstruktioner.

Lägg till bredd på main och aside i public/css/responsive-3cols.css

/* 1 column: main takes full width */
.cols-1 .main {
  flex: 1 1 100%;
}

/* 2 columns: main 70%, aside 30% */
.cols-2 .main {
  flex: 1 1 70%;
}
.cols-2 .aside {
  flex: 1 1 30%;
}

/* 3 columns: main 50%, each aside 25% */
.cols-3 .main {
  flex: 1 1 50%;
}
.cols-3 .aside {
  flex: 1 1 25%;
}

Ladda om sidan i webbläsaren så kommer du att se att kolumnerna nu har rimliga bredder. Använd shift ctrl r eller shift cmd r (Mac) för att rensa cache och ladda om sidan om du inte ser någon skillnad.