Vanliga Flexbox-layouter: navigering, kort och medieobjekt
Bygg praktiska navigeringsfält, kortgallerier och medieobjekt med Flexbox.
Vanliga Flexbox-layouter: navigering, kort och medieobjekt är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Varför Flexbox-mönster är viktiga
Vissa layoutmönster förekommer i nästan alla webbprojekt. Flexbox löser vart och ett av dem effektivt med minimal CSS. Om du kan de här mönstren går utvecklingen snabbare och koden blir kortare.
Mönster för navigeringsrad
En horisontell navigeringsrad med en logotyp till vänster och länkar till höger:
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Centrerad hero-sektion
Innehåll centrerat på höjden med full höjd och Flexbox:
<div class="hero">
<h1>Welcome</h1>
</div>
Kortgrid
Responsivt kortgrid med radbrytning och jämna mellanrum:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Medieobjekt
Medieobjektet – en bild med fast bredd bredvid flexibel text – är ett grundläggande UI-mönster som används i kommentarer, inlägg på sociala medier och listobjekt:
<div class="media">
<img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
<div class="media-body">
<strong>Jane Doe</strong>
<p>Comment text goes here.</p>
</div>
</div>
Klistrad sidfot med Flex
Flytta sidfoten längst ned utan att ange fasta höjder:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Knapp med ikon och text
Vertikalt centrerad ikon och text i en knapp:
<button class="btn">
<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
Download
</button>
Holy Grail med Flexbox
Holy Grail-layout med tre kolumner (header, footer, sidebar-main-sidebar):
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Formulärrad med etiketter
Justerade etikett- och inmatningspar på en formulärrad:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Miniatyrgalleri
Ett bildgalleri som radbryts:
<div class="gallery">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>
Chip-/tagglista
Chippar och taggar som radbryts inline och flödar som text:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Snabb kontroll
I medieobjektmönstret, vad hindrar textinnehållet från att flöda över om det innehåller en lång sträng som inte kan brytas?
Sammanfattning
Vanliga Flexbox-mönster: navigeringsrad (logotyp + auto-marginal + länkar), hero (kolumn + centrerad justering), medieobjekt (fast bild + flex:1-innehåll med min-width:0), klistrad sidfot (kolumnlayout + flex:1 på huvudinnehållet) och kortgrid (radbrytning + flex:1 1 Xpx). Dessa fem mönster täcker de flesta layoutbehoven i verkliga projekt.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Vanliga Flexbox-layouter: navigering, kort och medieobjekt” gratis?
Ja – hela texten till ”Vanliga Flexbox-layouter: navigering, kort och medieobjekt” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Vanliga Flexbox-layouter: navigering, kort och medieobjekt”?
Bygg praktiska navigeringsfält, kortgallerier och medieobjekt med Flexbox. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Vanliga Flexbox-layouter: navigering, kort och medieobjekt”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Åsidosätt flexobjektens justering med align-self
- Egenskapen order och visuell omordning
- Mönster för flex-förkortningssyntax
- Vanliga Flexbox-layouter: navigering, kort och medieobjekt