Med hver ny revision af CSS kommer en overflod af nye, spændende attributter til efterretning; hvoraf den ene er den understated display: flex tilgang.

Flexbox-layoutmodellen har i løbet af en lille stund nu floppet rundt på nettet, hver gang med sin egen variation på tilgangen (nogle forældede, som f.eks. Displayet: boks eller display: flexbox-metode).

I dagens vejledning opdager vi fordelene ved at udnytte flexboxteknikken i vores egne layouter.

Nogle gode funktioner i den nye model omfatter:

  • Nemt forholdsbaseret dimensionering; Du behøver ikke røre ved din HTML
  • Omordnes med en brise ved at bruge heltal i stilarket
  • Gælder alle barnelementer i en korrekt defineret forælder
  • Ikke flere clearfixes!

I del 2 vi tager et kig på, hvordan vi tager det endnu mere, og gør din flexbox layout til et fuldt modigt responsivt design!

Har du brugt flex box tilgang til layout? Foretrækker du en anden metode? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, fleksibelt billede via Shutterstock.