Understanding flex box CSS Day 2016
-
Upload
davide-di-pumpo -
Category
Technology
-
view
479 -
download
0
Transcript of Understanding flex box CSS Day 2016
![Page 1: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/1.jpg)
ABOUTFLEXBOXYou can't float anymore
CSS day FAENZA- 25 marzo 2016
![Page 2: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/2.jpg)
About me
I'm Davide Di Pumpo, I'm an UI developer in . I love graphic novel, competitive videogames and cats.
Objectway
You can �nd me on the internet with the nicknameMakhBeth - - Twitter GitHub LinkedIn
![Page 3: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/3.jpg)
Let's startMEOW
![Page 4: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/4.jpg)
The problem?How can I make this f*****g layout?
![Page 5: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/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 flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/6.jpg)
The code:
<div class="HolyGrail"> <header class="HolyGrail-header">HEADER</header> <div class="HolyGrail-body">
<main class="HolyGrail-content"> CONTENT <p> <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi inventore, magni porro, ab quas eos soluta voluptatibus delectus impedit iusto illum debitis laboriosam molestias. Quis iure facilis dolore architecto ipsam. </p> </main>
<nav class="HolyGrail-nav">NAV</nav>
<aside class="HolyGrail-ads">ADS</aside>
</div> <footer class="HolyGrail-footer">FOOTER</footer> </div>
![Page 7: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/7.jpg)
Once upon a time......we had:
Tables
Inline blocks
Float
![Page 8: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/8.jpg)
TablesSeriously?
Semantic? NOPE
Responsive? NOPE
Vertical align? YUP *
Order? NOPE *
![Page 9: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/9.jpg)
How aboutdisplay: table;?
Semantic? YUP
Responsive? YUP*
Vertical align? YUP
Order? NOPE *
![Page 10: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/10.jpg)
Come on! What's the problem guy?Styling the element is a pain.Try to add a padding to a row
or a max-width to a cell
or a margin...
The order is still a view issue * * You can use translate for horizontal order...
![Page 11: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/11.jpg)
*
.first { display: table-caption; }
.second { display: table-footer-group;}
![Page 13: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/13.jpg)
.HolyGrail { display: table; height: 100vh; } .HolyGrail-header { display: table-row; height: 1px; } .HolyGrail-footer { display: table-row; height: 1px; } .HolyGrail-body { display: table; height: 100%; }
![Page 14: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/14.jpg)
.HolyGrail-content,
.HolyGrail-nav,
.HolyGrail-ads { display: table-cell; width: 20%; } .HolyGrail-content { width: 60%; transform: translateX(33.333%); } .HolyGrail-nav { transform: translateX(-300%); }
![Page 15: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/15.jpg)
Inline BlockSemantic? YUP
Responsive? YUP *
Vertical align? ALMOST
Order? NOPE *
![Page 16: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/16.jpg)
What's the matter?Vertical stretch an element is impossible
The order is still a view issue * * You can use margins for horizontal order...
but...
BUT...
![Page 17: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/17.jpg)
White Space
![Page 19: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/19.jpg)
.HolyGrail-body { font-size: 0; text-align: left; } .HolyGrail-nav, .HolyGrail-content, .HolyGrail-ads { display: inline-block; vertical-align: top; font-size: 1rem; text-align: center; width: 20%; } .HolyGrail-nav { margin-left: -80%; } .HolyGrail-content { width: 60%; margin-left: 20%; } .HolyGrail-ads { margin-left: 60%; }
![Page 20: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/20.jpg)
FloatSemantic? YUP
Responsive? YUP
Vertical align? AHAHAHAHAH NOPE
Order? NOPE *
![Page 21: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/21.jpg)
Why not?The order is still a view issue * * You can use margins...
Impossible to manage vertical alignment
Clear�x Block Formatting Context
![Page 23: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/23.jpg)
.HolyGrail-body:after { display: table; clear: both; content: " "; } .HolyGrail-nav, .HolyGrail-content, .HolyGrail-ads { width: 20%; float: left; }
.HolyGrail-nav { margin-left: -80%; } .HolyGrail-content { width: 60%; margin-left: 20%; }
![Page 24: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/24.jpg)
RECAPabout the old good times
Tables have issues
Inline blocks have issues
Floats have issues
It's impossible (without hacks) to manage order
more important...
![Page 25: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/25.jpg)
They are all hacks
![Page 26: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/26.jpg)
Why Flexbox?Semantic? YUP
Responsive? YUP
Vertical align? YUP
Order? F*CK YEAH
![Page 28: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/28.jpg)
.HolyGrail { display: flex; flex-direction: column; min-height: 100vh; } .HolyGrail-body { display: flex; flex-grow: 1; } .HolyGrail-nav { order: -1; } .HolyGrail-content, .HolyGrail-nav, .HolyGrail-ads { flex: 1 0 20%; } .HolyGrail-content { flex-basis: 60%; }
![Page 29: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/29.jpg)
It's all there?Nope
![Page 30: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/30.jpg)
But �rst some important knowledge
![Page 31: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/31.jpg)
Di�erences between container and item
display: flex;
Flex item Flex item Flex item
![Page 32: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/32.jpg)
Direction
------ direction row ------>
Flex item Flex item Flex item
Column
Flex item
Flex item
Flex item
![Page 33: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/33.jpg)
Flex Basis, all is relative
flex-basis: 50%; flex-basis: 50%;
flex-basis: 50%;
flex-basis: 50%;
![Page 34: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/34.jpg)
Available space, this is the magic
flex item flex item FREE SPACE °_°y
flex grow flex item
flexshrink
flex item flex item
![Page 35: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/35.jpg)
Let's see the rules! CODEPEN
![Page 36: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/36.jpg)
<div class="Cont"> <div class="Ele Ele--a">A</div> <div class="Ele Ele--b">B</div> <div class="Ele Ele--c">C</div> </div>
A
B
C
![Page 37: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/37.jpg)
A B C
.Cont { display: flex; }
![Page 38: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/38.jpg)
A B C
.Cont { display: flex; justify-content: space-around; }
![Page 39: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/39.jpg)
A B C
.Cont { display: flex; justify-content: space-between; }
![Page 40: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/40.jpg)
A B C
.Cont { display: flex; justify-content: flex-end; }
![Page 41: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/41.jpg)
A B C
.Cont { display: flex; } .Ele--a { flex-grow: 1; }
![Page 42: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/42.jpg)
A
B
C
.Cont { display: flex; flex-direction: column-reverse }
![Page 43: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/43.jpg)
C
A
B
.Cont { display: flex; flex-direction: column } .Ele--c { order: -1; }
![Page 44: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/44.jpg)
A B C
.Cont { display: flex; } .Ele { width: 50%; }
![Page 45: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/45.jpg)
A B
C
.Cont { display: flex; flex-wrap: wrap; } .Ele { width: 50%; }
![Page 46: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/46.jpg)
A B
C
.Cont { display: flex; flex-wrap: wrap-reverse; } .Ele { width: 50%; }
![Page 47: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/47.jpg)
A B C
.Cont { display: flex; height: 100px; }
![Page 48: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/48.jpg)
A B C
.Cont { display: flex; height: 100px; align-items: flex-end; }
![Page 49: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/49.jpg)
AB
C
.Cont { display: flex; height: 100px; } .Ele--b { align-self: center; }
![Page 50: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/50.jpg)
Real stuff
![Page 52: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/52.jpg)
.FormContainer { display: flex; flex-wrap: wrap; } .Input { flex: 1 0 300px; }
![Page 53: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/53.jpg)
With mediaqueries
![Page 54: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/54.jpg)
![Page 56: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/56.jpg)
.Container { display: flex; flex-wrap: wrap; } .Title, .SubTitle { width: 100%; } @media only screen and (min-width: 50rem) { .Title, .SubTitle { order: -1; } }
![Page 57: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/57.jpg)
RECAPFlexible
Responsive
Ready for today
![Page 58: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/58.jpg)
What's now?
![Page 59: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/59.jpg)
Can I use?
![Page 60: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/60.jpg)
How about old crappy explorer?
![Page 61: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/61.jpg)
You can go for a fallback!
.FormContainer { display: flex; flex-wrap: wrap; } // Clearfix for old browser .FormContainer:after { display: table; clear: both; content: " "; } .Input { flex: 1 0 300px; float: left; // old browser support width: calc(25% - 10px); // old browser support }
![Page 63: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/63.jpg)
Is flexbox asilver bullet?
![Page 64: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/64.jpg)
NoSorry, I've lied to you
A little
![Page 65: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/65.jpg)
Flexbox is designed basically for:content driven layout
component
not for grid Take a look at css grid
![Page 66: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/66.jpg)
But Grid CSS is not supported fornow
![Page 67: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/67.jpg)
Any idea?There are a few:
And my favourite one...
Flexboxgrid
Bootstrap - alpha 4
![Page 69: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/69.jpg)
RECAPCan I use? Yes
It's not for everything, but it's the best we have now
There are a lot of tool to help us.
![Page 70: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/70.jpg)
Links for you:CSS Tricks guide to �exbox
Learn �exbox playing with �exbox froggy
All the known �exbox bugs
Autopre�xer
Modernizr
![Page 71: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/71.jpg)
Questions?
![Page 72: Understanding flex box CSS Day 2016](https://reader034.fdocuments.net/reader034/viewer/2022042706/5871aab81a28abda6a8b569d/html5/thumbnails/72.jpg)
http://goo.gl/1jsI7u