Sidebar-layouten

Tvåkolumns-layouten

Vi har redan jobbat med en centrerad layout i Innehållscontainern som använder max-width, ett brett textblock centrerat på sidan. Nu lägger vi till ett sidofält bredvid det.

Titta runt på webben så ser du mönstret överallt: ett smalt sidofält (sidebar) för det korta, en profil, kontaktuppgifter eller en meny, bredvid en bred huvuddel för det långa innehållet. Det är ett av webbens vanligaste layoutmönster.

Men mönstret skapar ett jättestort problem för mobiler. Kolumner som ligger snyggt bredvid varandra på en bred datorskärm blir hopklämda och oläsbara på en smal mobilskärm. Lösningen är mer Flexbox Flexbox CSS-layoutmodul som gör det enkelt att fördela utrymme och justera element längs en axel (rad eller kolumn). Styrs med display: flex på behållaren. Se: Navigationsstruktur . Flexbox är layoutens silvertejp, det löser nästan alla problem: vi använde det i navigationen, nu lär vi oss mer av det. Receptet vi använder kommer från designsystemet Every Layout.

Receptet: det flexibla sidofältet

<div class="wrapper">
    <aside class="sidebar">
        <!-- Det korta: profil, kontakt, länkar -->
    </aside>
    <main class="main">
        <!-- Det långa: huvudinnehållet -->
    </main>
</div>

.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.sidebar {
    flex-grow: 1;
    flex-basis: 250px;
}

.main {
    flex-grow: 999;
    flex-basis: 0;
    min-width: 50%;
}

Tre rader gör jobbet. flex-wrap: wrap ger kolumnerna lov att byta rad när utrymmet tar slut. flex-basis: 250px är sidofältets idealbredd. Och flex-grow: 999 låter huvuddelen suga upp allt utrymme som blir över, medan min-width: 50% styr var brytpunkten hamnar. Du behöver inte förstå matematiken bakom receptet nu, det viktiga är att du kan använda det.

Receptet kommer från Every Layout: The Sidebar. Där finns hela resonemanget bakom varje rad, den dag du vill gå till botten med det.

Pröva i DevTools: hitta brytpunkten

Öppna sidan med receptet inklistrat, tryck F12 och slå på mobilvyn (Toggle device toolbar). Ta tag i handtaget vid vyns kant och smalna av den långsamt. Vid en viss bredd släpper sidofältet och lägger sig under huvuddelen. Läs av bredden i pixlar högst upp i vyn: det är layoutens brytpunkt, och det är raden min-width: 50% som bestämmer var den ligger.