logo   Om Flexbox




CSS-properties til Flexbox: x


Den flexbox, der er aktuel idag (medio 2015) er version 3 (2009, 2011 og 2012). Den egentlige udbredelse af version 3 er første begyndt medio 2014. Den er nu indarbejdet i de nyeste versioner af de store browsere uden prefix (et lille forbehold for Safari). De tre versioner har været væsentligt forskellige i deres opbygning. Det er derfor væsentligt, ved læsning af kildemateriale, at sikre sig, at man har fat i den rigtige version.


Flexbox anvendes til responsiv opsætning af HTML-sider i stedet for at anvende de statiske 'div'-bokse. Forenklet udtrykt er anvendelsen af Flexbox blot at gøre det samme på en anden - men ikke nødvendigvis lettere - måde.


En Flexbox-side opbygges af en eller flere flexboxstrukturer. Enhver flexboxstruktur består af en 'container' og to eller flere 'felter' / 'items'. En ny struktur kan indlejres i et etableret felt / item. (Kinesisk æskesystem).




Flexboxstruktur


En fleksboxstruktur består af 5 eller flere enheder:


  • HTML
    • Flexbox. Wrapper eller anden container. Teknisk set er den en 'div'boks.
    • To eller flere indlejrede felter / items. Teknisk set er de 'div'bokse.
  • CSS
      CSS-selektorer
    • En CSS-selektor til containeren. Den skal indeholde deklarationen 'display: flex;'.
    • En fælles CSS-selektor for alle felter
    • Evt. en CSS-selektor for indtil hvert felt


Alle resopnsive data, der skal kunne vises fra en HTML-side skal være indlejret i en container og et felt.




Procentregning


Alt andet end 'wrapper', 'border' og tekster på en responsiv side bør være responsivt. Det indebærer at varianterne af 'height' og 'width' samt 'margin' og 'padding' skal angives som % - procent.

Felt 1   x%   
Felt 2   x%   
Felt 3   x%   
Marginx% * 2 * antal felter    x%   
Paddingx% * 2 * antal felter    x%   
Borderxpx * 2 * antal felter  ??%   
ialt<= 100%

'Border' spiller i regnestykket ind som en hund i et spil kegler. Den optager plads, men kan kun angives i pixel. (Der kan dog fortsat laves runde hjørner med 'border-radius: xpx;)





















x
x