Design Med CSS Flexbox
Hvordan er det lige, at man bruger display:flex; til at designe hjemmesider? Find ud af det her!
Af. Jacob
Edited: 2017-10-17 15:04
Det er forholdsvist nemt at designe hjemmesider med flexbox, men hvis man i forvejen har en side, som gør brug af float eller position, kan det godt være, at det er bedre at gøre den responsiv med media queries i stedet. Der er som sådan ikke en fordel ved, at redesigne en side med flexbox, og vælger man alligevel at gøre det, skal man være forberedt på at løbe ind i en række ulogiske problemer.
Det kan eksempelvis være svært at lave et layout, hvor to kolonner har en fastlåst bredde, i pixels, imens en tredje (den midterste kolonne) er fleksibel. Her vil en kombination af float, position og media queries nok være en del nemmere at arbejde med.
Til de hurtige. Nedenfor ses et simpelt eksempel på, hvordan man laver et 3-kolonne layout med flexbox:
<!doctype html>
<html lang="da">
<head>
<title>Test med Flexbox</title>
<style>
#flexbox {display:flex;flex-wrap:wrap;}
#flexbox .column {flex-basis:300px;min-height:400px;}
#flexbox article {flex-grow:1;}
#flexbox nav, div {flex-grow:0;}
/* Farver til at fremhæve layout-struktur og fremme forståelsen */
#flexbox article {background:rgb(248,248,248);}
#flexbox nav, div {background:rgb(239,239,239);}
ol {list-style-type:none;}
.column {padding:0.5em;}
</style>
</head>
<body>
<div id="flexbox">
<nav class="column">
</nav>
<article class="column">
</article>
<div class="column">
</div>
</div>
</body>
</html>
Se eksempel her: 3 kolonner med flexbox
Problemet med elementer med fast bredde
Hvis alle kolonner er flexible, så er flexbox perfekt til formålet. Men da man ofte vil have elementer i de enkelte kolonner, som har en relativ stor bredde – fastlåst i pixels (eksempelvis Google Adsense enheder) – kan det være svært at opnå det ønskede layout. I en sådan situation er float nok nemmere at arbejde med.
Billeder og video er en anden snak, og de burde ikke give de store problemer. Billeder kan tilpasses med: width:100%;max-width:300px; – max-width bør ikke være større end billedets faktiske bredde.
Det er selvfølgelig også problematisk, at Google stadig ikke har fixet problemet fra deres side. De har lavet nogle såkaldte responsiv-enheder, som opdateres én gang – når siden først vises. Dem kan vi bare ikke rigtigt bruge, på en side som skal være responsiv. Vi er derfor nødt til, at bruge de almindelige reklame enheder, da de giver os et mere forudsigeligt resultat at arbejde med. Vi kan så flytte dem og/eller fjerne dem med media queries afhængig af hvor stor browser vinduet er.
Jeg har faktisk svært ved at forstille mig en situation, hvor jeg ville bruge en responsiv enhed. Fordi i realiteten kan jeg ikke vide, hvor bred enheden vil være. Det giver – som nævnt tidligere – også nogle udfordringer når browser vinduet bliver lavet mindre eller større.
Mange mener at det ikke er så afgørende, at der opstår fejl når et browser vindue bliver lavet mindre, fordi en bruger sjældent vil gøre det i virkeligheden. Det er kun os eksperter, som sidder og tester vores layouts. Rigtigt nok er det de færreste som ændre størrelsen på et browser vindue, men dygtige PC brugere vil faktisk ret ofte have flere vinduer åbne, og måske endda arbejde med flere vinduer på skærmen samtidig. Det kender jeg fra mig selv. Argumentet holder derfor ikke, og i grunden bør vi bare tage os sammen og fikse vores layouts, så de virker efter hensigten – også når en bruger ændre størrelsen på browser vinduet. Det er ikke nok, kun at designe til mobile enheder. Der må ikke opstå fejl i layoutet under bestemte situationer – det er dårligt design.
Sådan bruger man flex på lister
Man kan eksempelvis bruge display:flex; på lister, for derved nemt at splitte listerne op i kolonner. Det er en ting som ellers kan være meget svært med float, og som ofte kan få elementerne til at "hoppe" rundt, og ende uforudsigelige steder. Det problem undgår vi helt med flex.
ol.flexbox {display:flex;flex-wrap:wrap;}
ol.flexbox li {flex-basis:300px;}
display:flex; laver elementet om til en flexbox. Elementet er stadig en liste i selve HTMLen, og semantikken er derved bevaret. Men elementet vil blive vist anderledes i en visuel browser.
flex-wrap:wrap; fortæller at de enkelte liste elementer skal skubbes ned under de øvrige elementer, når der ikke længere er plads til at vise alle elementerne ved siden af hinanden.
flex-basis:300px; angiver en slags minimums-bredde for de enkelte liste elementer. Normalt vil man også omtale dem som "kolonner", da vi jo har lavet dem om til kolonner. Ofte vil man derfor give de enkelte kolonner en klasse der hedder "column" – eller tilsvarende.
Brug af flex til side layout
Det er meget normalt, at man vil bruge flexbox til hele sidens layout. Det vil jeg personligt ikke gøre, med mindre jeg er sikker på, at der ikke skal bruges reklame-enheder på siden, da disse desværre er fastlåste – uden for vores kontrol.
Men hvis vores kolonner ellers er flexible – vi kender med andre ord ikke den præcise bredde i pixels, og denne er måske ikke engang relevant – så kan vi uden problemer bruge flexbox. Det er vigtigt at understrege, at det altså er bredden for de enkelte kolonner, når de overgår vores flex-basis.
Billeder giver ikke samme problemer som reklame enheder, da vi nemt kan tilpasse dem til kolonnen med CSS koden width:100%;max-width:300px; – max-width egenskaben bør svare til størrelsen på billedet.
Med udgangspunkt i eksemplet vist øverst i artiklen, så har vi følgende CSS at arbejde med:
#flexbox {display:flex;flex-wrap:wrap;}
#flexbox .column {flex-basis:300px;min-height:400px;}
#flexbox article {flex-grow:1;}
#flexbox nav, div {flex-grow:0;}
flex-grow angiver hvor meget plads, som de enkelte kolonner skal optage i flex-boxen. De øvrige egenskaber er forklaret i forrige afsnit.
En anden ting som er forholdsvis vigtig er, at man selvfølgelig bruger sektions elementerne til at opbygge sin side. Dvs. article, section, nav, header og footer. Osv. Jeg nævner det kun, fordi der stadig kan herske lidt forvirring omkring disse "nye" elementer, og hvordan de kan bruges.
Fortæl os hvad du tænker: