Hva er flexbox?

Flexbox er et kraftig verktøy i CSS-verktøykassen. Det løser noen vanlige utfordringer med dagens float-baserte layouts, og åpner opp for nye muligheter.

Ikke en erstatning for ‘float’

Før jeg gravde meg ned i hva flexbox virkelig var, hadde jeg en oppfatning av at det var en erstatning for float. Etter å ha brukt det en stund, innser jeg at det er mer et nytt verktøy, enn et verktøy som erstatter et annet. Floats har fortsatt sin plass, men flexbox er et bedre verktøy for mange av jobbene floats tidligere har gjort.

Det betyr også at man kan ta et nettsted som allerede eksisterer og drysse flexbox der det måtte være hensiktsmessig.

Hvor god er støtten?

I følge caniuse.com har vi i Norge en støtte på 96,44 %. De resterende prosentene består av Internet Explorer 8 og 9. Du bør selv sjekke besøksstatistikken eller målgruppen (hvis du ikke har lansert enda) for å se hvor god støtten er.

Du bør også ta hensyn til prefikser og nettlesere som støtter den utdaterte anbefalingen. Verktøy som Sass/Compass, Autoprefixer og lignende kan hjelpe deg med dette.

Hva gjør flexbox bedre enn floats?

Flexbox fungerer på en helt annen måte enn floats. Først og fremst til å løse det som tradisjonelt sett har vært vanskelig å løse med floats, men i fremtiden vil vi se nye layouts og løsninger dukke opp på grunn av mulighetene flexbox gir oss.

Vanlige problemer man møter på når man jobber med HTML/CSS som flexbox løser:

Vertikalt sentrere et element

For eksempel hvis du ønsker å få tekst midt på et bilde både horisontalt og vertikalt.

Sentrert tekst, både horisontalt, vertikalt og over flere linjer
Illustrasjon av tekst som ligger sentrert både vertikalt og horisontalt over et fotografi.

 

Jevnt distribuere elementer horisontalt

Uten å måtte ta hensyn til hvor mange elementer det er. For eksempel i en horisontal navigasjonsmeny hvor du ønsker at elementene jevnt skal distribuere seg over hele navigasjonslinjen.

Lik avstand mellom menyelementene
Illustrasjon som viser jevn distribusjon av luften mellom elementene i en navigasjonsmeny.

Endre rekkefølgen på elementer i DOM-en

For eksempel hvis man på mobil ønsker en annen rekkefølge enn den man har i DOM-en.

Lage grids enklere

Her kan man enkelt distribuere bilder eller produkter jevnt, og enkelt ta hensyn til den responsive delen av det.

Det åpner også opp for nye muligheter layout-messig; både på desktop og på mobil.

Med hjelp av conditional classes kan du også bake inn en grasiøs fallback til de få prosentene som sitter på eldre nettlesere som IE8 og IE9.

Hvordan fungerer det?

I prinsippet har man to nye elementer i flexbox: Flexbox-kontaineren og flexbox-elementet. Man gjør et element til en flexbox-kontainer med display: flex; og da vil alle direkte barn av det kontainer-elementet automatisk bli flexbox-elementer.

<!– Hvis denne er satt til display: flex; … –>
<div class="kontainer">
  <!– … blir disse elementene rett under automatisk til flexbox-element –>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

Flexbox-elementene vil som standard legge seg på en horisontal linje i flexbox-kontaineren. (Som følge av standard-verdien: flex-direction: row;.)

display: flex;

Fra før av kjenner du kanskje til display:-propertyen som tar verdier som block, inline, inline-block (og noen andre mer obskure verdier). For å gjøre en boks til en flexbox setter man display: til flex eller inline-flex. Utad vil flex-kontaineren oppføre seg som et block-element med flex, men som et inline-element med inline-flex. Akkurat som block og inline-block.

.kontainer {
  display: flex;
  /* Ikke glem prefixer og støtte for IE10 (gammel syntaks) */
}

/* Kun for å tydeliggjøre elementene */
.kontainer {
  padding: 16px;
  background: black;
  font-family: sans-serif;
}
.kontainer > * {
  padding: 8px;
  border: 5px solid #ff00f6;
  color: #ff00f6;
  font-size: 24px;
  margin: 5px
}

See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

Akser

Når et element er satt til display: flex; får man to akser å tenke på: Hovedaksen og kryssaksen. Hovedaksen går i den retningen du har satt flyten til. Hvis du ikke har definert en flytretning er standard flytretning row. Det betyr at elementene er «tredd på en snor» horisontalt over boksen. Hvis du endrer retning til column henger snoren fra toppen av boksen til bunnen. Startpunktet for boksene er venstre på row og toppen på column.

flex-direction: row; (row er standardverdien.)

See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

flex-direction: column; See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

Man kan distribuere, endre startpunkt, endre på rekkefølgen og mye annet på disse elementene som ligger på enten hovedaksen eller kryssaksen.

Flexbox inni flexbox

Da jeg begynte å lære meg flexbox, føltes konseptet med en flexbox inni en flexbox som en hack. Det viste seg å være feil, og man kan gjøre mange flere ting med å legge flexboxer inni hverandre. Merk: Et flexbox-element også kan være en flexbox-kontainer.

Hva mer er det?

Det er flust med ting du kan gjøre med flexbox, men intensjonen med denne artikkelen er ikke å forklare alt. Under har du lenker til ressurser som gjør en ypperlig jobb med å forklare nærmere hva flexbox er og hvordan du kan bruke det.

Er det noe spesifikt du lurer på kan du veldig gjerne legge igjen et spørsmål til meg i kommentarfeltet!

Lær deg Flexbox

Vis eller skjul passord?

Hvorfor jeg ikke anbefaler Lyse å vise passord ved innlogging.

Denne artikkelen var først publisert på Medium.

Innlogging skaper frustrasjon. Mye og ofte. Det finnes mange tiltak for å gjøre innloggingsprosessen sømløs. Én av metodene er å gi brukeren mulighet til å se sitt passord i klartekst. Du har nok sett valget Vis passord, Vis/skjul, eller kanskje sett et lite ikon av et øyelokk. Dette valget er som regel skrudd av. Som bruker må du aktivt skru det på.

På lyse.no kan du hake av for å se ditt passord i klartekst.Kongen av skjemadesign, Luke Wroblewski, anbefaler å vise passordet i klartekst som standardvalg. Inspirert av denne anbefalingen satt jeg opp en A/B-test på lyse.no der halvparten av kundene se passordet, og resten fikk passordet maskert. Alle fikk mulighet til å skru av og på maskeringen. Jeg testet dette på over 8000 kunder ved hjelp av tjenesten Optimizely.

Konklusjonen var denne gang ikke i tråd med Lukes anbefaling. Nesten 10 % færre av dem som så passordet i klartekst logget inn. Anbefalingen til Lyse er derfor å beholde maskert passord inntil kundene har blitt mer modne for dette via andre tjenester.

De harde fakta

Min hypotese var at kundene ville få færre skrivefeil ved å hele tiden se passordet sitt. Jeg sjekket derfor antall feilmeldinger. Før testen skrev mellom 16 % (stor skjerm) og 18 % (mobil) av kundene feil e-post eller passord (loggene skiller dessverre ikke på dette). Under testen steg denne feilandelen til henholdsvis 18 og 27 %. Dette er en massiv økning, spesielt på mobil, og spesielt når man tenker på at det var kun 50 % av de besøkende som var utsatt for eksperimentet.

Det er godt mulig at testen burde vært satt opp annerledes, at det er faktorer her som jeg ikke har sett, og at andre innloggingstjenester vil få helt andre tall.

Har du testet noe lignende? Hvorfor tror du denne testen økte feilraten? Diskuter gjerne med meg på Twitter. Jeg heter @aeslettebo.