Post on 08-Jan-2017
ABOUTFLEXBOXYou can't float anymore
MILANO FRONT END MEETUP - 15/12/2015
About me
I'm Davide Di Pumpo and I'm a front-end developer. I love graphic novel, competitive videogames and cats.
You can find me on the internet with the nicknameMakhBeth - - Twitter GitHub LinkedIn
Let's startMEOW
The problem?How can I make this f*****g layout?
The holy grail layout
The Holy Grail refers to a web page layout which has multiple, equal heightcolumns that are defined with style sheets. It is commonly desired andimplemented, although the ways in which it can be implemented with currenttechnologies all have drawbacks. Because of this, finding an optimalimplementation has been likened to searching for the elusive Holy Grail.
Source - Wikipedia
Once upon a time......we had:
TablesInline blockFloat
TablesSeriously?
Semantic? NOPE
Responsive? NOPE
Vertical align? YUP
Order? NOPE *
How aboutdisplay: table;?
Semantic? YUP *
Responsive? YUP *
Vertical align? YUP *
Order? NOPE *
Come on! What's the problem guy?You must use element to simulate rowStyling the element is a pain.Try to add a padding to a row
or a max-width to a cell
The order is still a view issue
Try it yourself
Inline BlockSemantic? YUP
Responsive? YUP *
Vertical align? ALMOST
Order? NOPE *
What's the matter?Vertical stretch an element is impossiblebut...BUT...
White Space
FloatSemantic? YUP
Responsive? YUP *
Vertical align? AHAHAHAHAH NOPE
Order? NOPE *
Why not?Clearfix Block Formatting Context
Impossible to manage vertical alignment
The holy grail
RECAPabout the old good times
Tables have issuesInline blocks have issuesFloats have issuesIt's impossible (without hacks) to manage ordermore important...
They are all hacks
Why Flexbox?Semantic? YUP
Responsive? YUP
Vertical align? YUP
Order? F*CK YEAH
It's all there?Nope
But first some important knowledge
Differences between container and item
display: flex;
Flex item Flex item Flex item
Direction
------ direction row ------>
Flex item Flex item Flex item
Column
Flex item
Flex item
Flex item
Flex Basis, all is relative
flex-basis: 50%; flex-basis: 50%;
flex-basis: 50%;
flex-basis: 50%;
Responsive without media query!You can use flex basis to manage a min-dimension
EXAMPLE
Mix it with the old school!You can starting use flex via beautiful enhancement!
EXAMPLE
But you can use mediaquery for beautiful thing
With order property!
EXAMPLE
RECAPFlexibleResponsiveReady for today
What's now?
Can I use?
Is flexbox asilver bullet?
NoSorry, I've lied to you
A little
Flexbox is designed basically for:content driven layoutcomponentnot for grid Take a look at css grid
But Grid CSS is not supported fornow
Any idea?There are a few:
And my favourite one...
FlexboxgridBootstrap - alpha 4
RECAPCan I use? YesIt's not for everything, but is the best we have nowThere are a lot of tool to help us.
Links for you:CSS Tricks guide to flexboxLearn flexbox playing with flexbox froggyAll the known flexbox bugsAutoprefixer
Questions?