sfscon17 - davide montesin: "css flex box layout"
TRANSCRIPT
![Page 1: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/1.jpg)
CSS3 Flexbox
by Davide Montesin <[email protected]>
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 1 / 21
![Page 2: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/2.jpg)
Many many years ago
don't use html tables for layout, but css
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 2 / 21
![Page 3: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/3.jpg)
Panic
How can I now...
center divs
center divs vertically
columns
columns of the same height
dynamic use of the space
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 3 / 21
![Page 4: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/4.jpg)
The short way
<div style="display: table">
https://commons.wikimedia.org/w/index.php?curid=4526281(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 4 / 21
![Page 5: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/5.jpg)
The hero way
css hacks: css rules recognized only by some browsers: -ms, -o, <!--IE
css tricks: extra divs, smart rules, ...
By H. Powers (Rolla Bolla) CC BY 2.0(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 5 / 21
![Page 6: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/6.jpg)
If I want to center ...
https://css-tricks.com/centering-css-complete-guide/
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 6 / 21
![Page 7: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/7.jpg)
The funny way
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 7 / 21
![Page 8: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/8.jpg)
The funny way
http://oli.jp/2011/ids/ https://mathiasbynens.be/
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 8 / 21
![Page 9: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/9.jpg)
Flexbox
Can Flexbox be the rescue?
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 9 / 21
![Page 10: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/10.jpg)
Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 10 / 21
![Page 11: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/11.jpg)
browser support
https://caniuse.com/#search=flexbox
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 11 / 21
![Page 12: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/12.jpg)
Container / Items
there are properties for containers and for items
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 12 / 21
![Page 13: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/13.jpg)
Direction
a row of items
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 13 / 21
![Page 14: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/14.jpg)
Justify
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 14 / 21
![Page 15: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/15.jpg)
Align
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 15 / 21
![Page 16: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/16.jpg)
Grow
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 16 / 21
![Page 17: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/17.jpg)
Shrink
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 17 / 21
![Page 18: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/18.jpg)
Align
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 18 / 21
![Page 19: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/19.jpg)
Order
https://css-tricks.com/snippets/css/a-guide-to-flexbox/(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 19 / 21
![Page 20: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/20.jpg)
Future directions
grid layout: 2-dimensional flexbox
https://css-tricks.com/snippets/css/complete-guide-grid/
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 20 / 21
![Page 21: SFScon17 - Davide Montesin: "CSS flex box layout"](https://reader035.vdocuments.us/reader035/viewer/2022081323/5a64c44f7f8b9a88148b5095/html5/thumbnails/21.jpg)
Have fun with flexbox
Enjoy doing web layout again :-)
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 21 / 21