Embed Size (px)
Citation preview
CSS3 Flexbox
by Davide Montesin <[email protected]>
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 1 / 21
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
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
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
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
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
The funny way
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 7 / 21
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
Flexbox
Can Flexbox be the rescue?
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 9 / 21
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
browser support
https://caniuse.com/#search=flexbox
(C) 2013-2017 Davide Montesin <[email protected]> - License: CC BY NC ND CSS3 Flexbox 11 / 21
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
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
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
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
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
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
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
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
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
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
