understanding flexbox
TRANSCRIPT
![Page 1: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/1.jpg)
ABOUTFLEXBOXYou can't float anymore
MILANO FRONT END MEETUP - 15/12/2015
![Page 2: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/2.jpg)
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
![Page 3: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/3.jpg)
Let's startMEOW
![Page 4: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/4.jpg)
The problem?How can I make this f*****g layout?
![Page 5: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/5.jpg)
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
![Page 6: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/6.jpg)
Once upon a time......we had:
TablesInline blockFloat
![Page 7: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/7.jpg)
TablesSeriously?
Semantic? NOPE
Responsive? NOPE
Vertical align? YUP
Order? NOPE *
![Page 8: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/8.jpg)
How aboutdisplay: table;?
Semantic? YUP *
Responsive? YUP *
Vertical align? YUP *
Order? NOPE *
![Page 9: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/9.jpg)
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
![Page 10: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/10.jpg)
Inline BlockSemantic? YUP
Responsive? YUP *
Vertical align? ALMOST
Order? NOPE *
![Page 11: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/11.jpg)
What's the matter?Vertical stretch an element is impossiblebut...BUT...
![Page 12: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/12.jpg)
White Space
![Page 13: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/13.jpg)
FloatSemantic? YUP
Responsive? YUP *
Vertical align? AHAHAHAHAH NOPE
Order? NOPE *
![Page 14: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/14.jpg)
Why not?Clearfix Block Formatting Context
Impossible to manage vertical alignment
The holy grail
![Page 15: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/15.jpg)
RECAPabout the old good times
Tables have issuesInline blocks have issuesFloats have issuesIt's impossible (without hacks) to manage ordermore important...
![Page 16: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/16.jpg)
They are all hacks
![Page 17: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/17.jpg)
Why Flexbox?Semantic? YUP
Responsive? YUP
Vertical align? YUP
Order? F*CK YEAH
![Page 19: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/19.jpg)
It's all there?Nope
![Page 20: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/20.jpg)
But first some important knowledge
![Page 21: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/21.jpg)
Differences between container and item
display: flex;
Flex item Flex item Flex item
![Page 22: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/22.jpg)
Direction
------ direction row ------>
Flex item Flex item Flex item
Column
Flex item
Flex item
Flex item
![Page 23: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/23.jpg)
Flex Basis, all is relative
flex-basis: 50%; flex-basis: 50%;
flex-basis: 50%;
flex-basis: 50%;
![Page 25: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/25.jpg)
Responsive without media query!You can use flex basis to manage a min-dimension
EXAMPLE
![Page 26: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/26.jpg)
Mix it with the old school!You can starting use flex via beautiful enhancement!
EXAMPLE
![Page 27: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/27.jpg)
But you can use mediaquery for beautiful thing
With order property!
EXAMPLE
![Page 28: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/28.jpg)
RECAPFlexibleResponsiveReady for today
![Page 29: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/29.jpg)
What's now?
![Page 30: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/30.jpg)
Can I use?
![Page 32: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/32.jpg)
Is flexbox asilver bullet?
![Page 33: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/33.jpg)
NoSorry, I've lied to you
A little
![Page 34: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/34.jpg)
Flexbox is designed basically for:content driven layoutcomponentnot for grid Take a look at css grid
![Page 35: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/35.jpg)
But Grid CSS is not supported fornow
![Page 36: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/36.jpg)
Any idea?There are a few:
And my favourite one...
FlexboxgridBootstrap - alpha 4
![Page 38: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/38.jpg)
RECAPCan I use? YesIt's not for everything, but is the best we have nowThere are a lot of tool to help us.
![Page 39: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/39.jpg)
Links for you:CSS Tricks guide to flexboxLearn flexbox playing with flexbox froggyAll the known flexbox bugsAutoprefixer
![Page 40: Understanding flexbox](https://reader031.vdocuments.mx/reader031/viewer/2022021919/5871aab81a28abda6a8b5697/html5/thumbnails/40.jpg)
Questions?