HTML & CSS del 6 av 8: Layout med CSS – från kaos till kontroll
Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.
Denna serien handlar om HTML & CSS och detta är avsnittet 6 av 8.
---
Hur får man saker att hamna rätt på en webbsida? I det här avsnittet går vi igenom hur du med hjälp av CSS kan styra var dina element placeras – från grundläggande positionering till moderna layoutekniker med Flexbox. Det är här din webbsida går från enkel stapling till professionell struktur.
Du lär dig:
- Hur CSS display påverkar hur element visas (block, inline, flex m.fl.)
- Vad position betyder – och hur du placerar saker exakt där du vill ha dem
- Hur Flexbox fungerar och varför det förenklar layout
- Tips för att undvika vanliga layoutproblem – och hur du felsöker med webbläsarens utvecklarverktyg
Det här avsnittet ger dig kontroll över hur din sida faktiskt ser ut – oavsett skärmstorlek eller innehåll.
👉 I nästa avsnitt tar vi det vidare till responsiv design – så att din sida fungerar snyggt på både dator och mobil.
---
Exempel
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
.container {
display: flex;
}
---
Resurser
🐸 Flexbox Froggy: https://flexboxfroggy.com/
