Flexbox

Webblayoutens silvertejp

Före flexbox så var layout en mardröm av float, position absolute och negativa marginaler. Flexbox är som en superkraft som låter dig placera element i rad eller kolumn, centrera dem perfekt, och skapa flexibla layouter utan att behöva gissa med pixelvärden.

Kort och gott webblayoutens silvertejp.

Container och items

Förstå denna distinktion: display: flex sätts på föräldern (flex-container). Barnen kallas flex-items, och det är de som flyttar på sig.

<nav>
    <ul class="nav-list">
        <li><a href="/">Hem</a></li>
        <li><a href="/om">Om</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
    </ul>
</nav>

.nav-list {
    list-style: none;
    display: flex;
    gap: 1rem;
}

Känner du igen koden? Det är nav-receptet från Tema 1. .nav-list är flex-containern, och varje <li> blir ett flex-item som lägger sig på rad. gap sätter mellanrummet mellan dem, på ett enda ställe i containern i stället för margin på varje item. Utan display: flex hade listpunkterna staplats vertikalt, som block-element gör.

De viktigaste verktygen

Flexbox tänker i två axlar. Huvudaxeln är riktningen dina items placeras i, vänster till höger i en vanlig rad. Tvärsaxeln går vinkelrätt mot den. De två viktigaste verktygen styr var innehållet hamnar längs varsin axel.

justify-content

Fördelar items längs huvudaxeln. Det här är den flex-egenskap du kommer att använda oftast:

.container {
    justify-content: flex-start;
    justify-content: center;
    justify-content: space-between;
}

flex-start är standard och packar allt mot startkanten. center centrerar. space-between trycker första och sista mot varsin kant och fördelar resten jämnt, perfekt för en header med logotyp till vänster och meny till höger.

align-items

Placerar items längs tvärsaxeln, vertikalt i en vanlig rad:

.container {
    align-items: stretch;
    align-items: center;
}

stretch är standard: alla items sträcks ut till containerns höjd. center är värdet du kommer att älska: det mittar items vertikalt, som en logotyp och menylänkar som ska ligga i linje trots att de är olika höga. flex-end lägger dem mot botten.

flex-direction

Byter riktning på huvudaxeln:

.container {
    flex-direction: column;
}

Standard är row, en horisontell rad. column staplar items vertikalt i stället, och då byter axlarna jobb: justify-content styr plötsligt det vertikala. Det är därför axeltänket är viktigare än att memorera “horisontellt” och “vertikalt”.

gap

Sätter mellanrum mellan items, aldrig på ytterkanterna:

.container {
    display: flex;
    gap: 1rem;
}

Före gap la man margin på varje item och fick putsa bort överskottet i kanterna. gap gör jobbet på ett ställe, bara mellan items. I uppgiften får du se skillnaden med egna ögon.

Fördela utrymmet: flex: 1

flex: 1 är kortform för flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Översättning: “väx och ta all tillgänglig plats”.

Du har redan byggt en sidolayout med Sidebar-receptet i Tema 2, det bor också i Receptsamlingen. Här är en enklare släkting som visar vad flex: 1 faktiskt gör:

<div class="layout">
    <aside class="sidebar">Sidofält</aside>
    <main class="content">Huvudinnehåll</main>
</div>

.layout {
    display: flex;
    gap: 2rem;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
}

.content {
    flex: 1;
}

Sidofältet får en fast bredd, och flex-shrink: 0 hindrar det från att krympa när utrymmet blir trångt. Innehållet får flex: 1 och tar allt utrymme som blir över. Skillnaden mot Tema 2-receptet: den här varianten är lättare att läsa, men den anpassar sig inte till smala skärmar. Det är receptets flex-wrap och flex-grow: 999 som gör det responsivt, och i Nästa nivå plockar du isär exakt hur.

Vill du i stället ha tre lika stora kolumner:

.col {
    flex: 1;
}

Alla tre växer lika mycket och delar utrymmet jämnt.

Flexbox är endimensionellt

Flexbox hanterar ett led åt gången: en rad eller en kolumn. Det är en styrka, det är lätt att tänka på, men också en gräns.

För riktiga rutnät med både rader och kolumner samtidigt finns CSS Grid. Den här kursen stannar vid flexbox, du kommer bara att se en glimt av Grid i Tema 4, men när du vill utforska rutnät på egen hand finns Grid-guider och spelet Grid Garden bland kursens resurser.

Försök inte tvinga flexbox att göra Grids jobb. Komplexa flex-wrap-konstruktioner för 2D-layout blir svåra att kontrollera. Känn till gränsen.

Pröva i DevTools: Den dolda flex-redigeraren

Öppna en sajt med en meny (eller din egen kod). Tryck F12 och inspektera menyns föräldra-element.

1. I HTML-trädet ser du en liten bricka bredvid elementet där det står flex. Klicka på den! Webbläsaren ritar nu ut lila linjer på skärmen som visar flex-zonerna.
2. Titta i fliken Styles till höger. Bredvid raden display: flex finns en liten ikon som ser ut som ett rutnät. Klicka på den!
3. En visuell panel öppnas. Här kan du klicka direkt på ikonerna för justify-content och align-items för att se elementen flytta sig live på skärmen.