CSS Flexbox
No magic numbers
lös aldrig layout / positionsproblem med att ange exakt pixlar som funkar just i det scenariot
En bra container kan "andas"
d.v.s öka och minska i storlek utan att layouten rasar samman
Hur gör vi en container flexibel?
Genom att använda flexbox :-)
Vad är flexbox?
rent tekniskt
en låda med riktning!
flex-start
flex-end
Vad är flexbox?
två riktningar (eller 4)
flex-start
flex-end
flex-start
flex-end
flex-direction: row
(row-reverse)
flex-direction: column (column-reverse)
parent > child
flex item
flex item
flex item
flex item
flex container
Att göra en låda till flex container
display: flex
Positionering hos föräldern
justify-content & align-items
flex-start
flex-end
center
flex-start
flex-end
center
align-items
justify-content
Kodövning flexbox positionering med justify-content och align-items
Kontrollera spridningen
space-between
flex-start
flex-end
center
flex-start
flex-end
center
align-items
justify-content
funkar med justify-content
Kontrollera spridningen
space-around
flex-start
flex-end
center
flex-start
flex-end
center
align-items
justify-content
funkar med justify-content
Positionering hos föräldern
flippas vid byte av riktning
flex-start
flex-end
center
flex-start
flex-end
center
justify-content
align-items
Kodövning flexbox positionering med space-between och space-around
Funkar utmärkt
när alla children ska följa samma system
Men om man vill placera ut barnen olika i flexboxen, hur gör man då?
Behålla position, byta sida
align-self behåller sin "plats"
flex-start
flex-end
flex-start
flex-end
align-self på flex item
Kodövning flexbox positionering med align-self
Positionering hos barn
men hur gör man här?
flex-start
flex-end
flex-start
flex-end
May the force be with you
tänk i krafter med hjälp av margin
flex-start
flex-end
flex-start
flex-end
margin-top: auto på flex item
Responsiv design
något flexbox var designat för
När uttrymmet fylls upp
låta flex items bryta på ny rad i containern
flex-wrap: no-wrap (default)
flex-wrap: wrap (wrap-reverse)
Justera flera rader i containern
använd align-content när height är satt på containern
align-content: stretch (default)
align-content: center
align-content: space-between
finns även för flex-start, flex-end, space-around
Hur items ska "flexa"
- flex-grow
- flex-shrink
- flex-basis
d.v.s resiza i förhållande till utrymmet
I förhållande till varandra
flex-grow: 1
på alla items
flex-grow: <number>
flex-grow: 2
på box 2
flex-grow: 4
på box 3
Kvarvarande uttrymme
flex-shrink: 1; på alla boxar
flex-shrink: <number>
default är 1, vilket innebär att alla item krymper i samma takt såvida du inte anger något annat!
flex-shrink: 5 på box 2
Flex Shorthand
flex: none | <flex-grow> <flex-shrink> <flex-basis>
flex: 0 1 auto (default)
d.v.s resiza i förhållande till utrymmet
flex: 1 1 auto (default)
Tillåts att växa
Upptar ej utrymmet (default)
Initiala bredden (höjden)
flex-basis: längd |procent | auto
flex: 0 1 100px
100 px
100 px
100 px
100 px
100 px
flex: 1 1 100px
vid grow tar varje item upp mer än 100px