Almindelige Flexbox-layouts: navigation, kort og media objects
Opret praktiske navigationsbjælker, kortgitre og media objects med Flexbox.
Almindelige Flexbox-layouts: navigation, kort og media objects er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvorfor Flexbox-mønstre er vigtige
Visse layoutmønstre findes i næsten alle webprojekter. Flexbox løser hvert af dem effektivt med minimal CSS. Når du kender disse mønstre, kan du udvikle hurtigere og skrive mindre kode.
Mønster for navigationslinje
En vandret navigationslinje med et logo til venstre og links til højre:
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Centreret hero-sektion
Centreret indhold i fuld højde med Flexbox:
<div class="hero">
<h1>Welcome</h1>
</div>
Kortgitter
Responsivt kortgitter med ombrydning og ensartede mellemrum:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Medieobjekt
Medieobjektet — et billede med fast bredde ved siden af fleksibel tekst — er et grundlæggende UI-mønster, der bruges i kommentarer, opslag på sociale medier og listeelementer:
<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>
Sidefod i bunden med Flex
Skub sidefoden ned i bunden uden at angive faste højder:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Knap med ikon og tekst
Vertikalt centreret ikon og tekst i en knap:
<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-layout med Flexbox
Holy Grail-layout med tre kolonner (sidehoved, sidefod, sidepanel-hovedindhold-sidepanel):
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Formularrække med etiketter
Justerede par af etiketter og inputfelter i en formularrække:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Galleri med miniaturebilleder
Et billedgalleri med ombrydning:
<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>
Liste over chips/tags
Chips/tags på linje, der ombrydes og flyder som tekst:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Hurtigt tjek
I medieobjektmønsteret, hvad forhindrer tekstindholdet i at flyde ud, hvis det indeholder en lang streng uden brydepunkter?
Opsummering
Almindelige Flexbox-mønstre: navigationslinje (logo + automatisk margen + links), hero (kolonne + centreret justering), medieobjekt (fast billede + flex:1-indhold med min-width:0), sidefod i bunden (kolonneindhold + flex:1-hovedindhold), kortgitter (ombrydning + flex:1 1 Xpx). Disse fem mønstre dækker størstedelen af behovene i layouts fra den virkelige verden.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Almindelige Flexbox-layouts: navigation, kort og media objects” gratis?
Ja — hele teksten til “Almindelige Flexbox-layouts: navigation, kort og media objects” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Almindelige Flexbox-layouts: navigation, kort og media objects”?
Opret praktiske navigationsbjælker, kortgitre og media objects med Flexbox. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Almindelige Flexbox-layouts: navigation, kort og media objects”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Tilsidesættelse af flex-item-justering med align-self
- Order-egenskaben og visuel omarrangering
- Flex-shorthand-mønstre
- Almindelige Flexbox-layouts: navigation, kort og media objects