Med hver ny revisjon av CSS kommer en mengde nye, spennende attributter til lys. hvorav den ene er den undervurderte skjermen: flex-tilnærming.

Flexbox-layoutmodellen har vært flytende rundt på nettet for en liten stund nå, hver gang med egen variasjon på tilnærmingen (noen utdaterte, for eksempel skjermen: boks eller display: flexbox-metode).

I dagens veiledning oppdager vi fordelene ved å utnytte flexboxteknikken i våre egne layouter.

Noen flotte funksjoner i den nye modellen inkluderer:

  • Enkel ratio-basert dimensjonering; Du trenger ikke å røre HTML-koden din
  • Omordne med en bris ved å bruke heltall i stilarket
  • Gjelder alle barnelementer i en riktig definert forelder
  • Ingen flere clearfixes!

I del 2 Vi tar en titt på hvordan du tar dette enda lenger, og gjør fleksibilitetsoppsettet ditt til en fullverdig responsiv design!

Har du brukt fleksiboks tilnærming til layout? Foretrekker du en annen metode? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, fleksibelt bilde via Shutterstock.