CSS Flexbox

CSS Flexbox is a new specifications to help us deal with layouts with dynamic content. In this presentation, I will explain you the basic concepts of Css Flexbox, show you some practical examples and tell you a bit about browser compatibility.

If you like this presentation you can also check out my blog at http://julienklepatch.com/blog for other web-development & WordPress tutorials

Transcript

1. CSS FlexBox Julien KLEPATCH WordPress WEB-DEVELOPER @jklepatch / julienklepatch.com Taipei Javascript Meetup – Mar 2015
2.  Basics Concepts  Container Properties  Item Properties  3 Practical Examples  FlexBox Compatibility CSS FlexBox Summary
3.  Basics Concepts  Container Properties  Item Properties  3 Practical Examples  FlexBox Compatibility CSS FlexBox Summary
4.  New CSS Specification of the W3C (Currently Last Call Working Draft)  Makes it easier to align and distribute space among items in a container when dimensions are unknown  Makes it easier to build responsive layouts  Works both for height and width ( direction-agnostic )  Container alter its item dimension and order. Items can override container calculations CSS FlexBox What is CSS Flexbox ?
5. CSS FlexBox Container & Items Container Items .container { display: flex; } code
7.  Basics Concept  Container Properties  Item Properties  3 Practical Examples  FlexBox Compatibility CSS FlexBox Summary
8. CSS FlexBox Flex-direction (applies to flex container) .container { display: flex; flex-direction: column } code .container { display: flex; flex-direction: row } code
9. CSS FlexBox Main axis and cross axis Main-axis Cross axis Main axis Cross axis (Flex-direction: row) (Flex-direction: column)
10. CSS FlexBox Flex-wrap .container { display: flex; flex-wrap: wrap; } Code By default all items are on a single row Flex-wrap: wrap alters this behavior
11. CSS FlexBox Other container properties Applies to space within a row: - justify-content - align-items Applies to space between rows: - align-content
13.  Basics Concepts  Container Properties  Item Properties  3 Practical Examples  FlexBox Compatibility CSS FlexBox Summary
14. CSS FlexBox Flex-order item3 item2 item 1 .container { display: flex; } .item1 { order: 2; } .item2 { order: 1; } .item3 { order: 3; } Code - html <div class=“container”> <div class=“item1”> </div> <div class=“item2”> </div> <div class=“item3”> </div> </div> Code - css item2 item1
15. CSS FlexBox Item size (1) Item size = flex-basis + flex-grow Container too big Case 1 Item size = flex-basis - flex-shrink Container too small Case 2
16. CSS FlexBox Item size (2): flex-basis .item { flex-basis: auto; } .item1 { flex-grow: 1; } .item2 { flex-grow: 1; } .Item3 { flex-grow: 2; } Code short longgggggggggggggg short 1 1 1 1 2 2 flex-basis = auto: => flex-grow is available space after content was allocated
17. CSS FlexBox Item size (3): flex-basis .item { flex-basis: 0; } .item1 { flex-grow: 1; } .item2 { flex-grow: 1; } .Item3 { flex-grow: 2; } Code short longgggggggg short 1 1 2 flex-basis = 0: => flex-grow is size of element relative to other elements
19.  Basics Concepts  Container Properties  Items Properties  3 Practical Examples  FlexBox Compatibility CSS FlexBox Summary
20. CSS FlexBox Vertical Centering (1) : Single Item .container { display: flex; } .item1 { margin: auto; width: 200px; } Code
21. CSS FlexBox Vertical Centering (2) : multiple Items .container { display: flex; } .item { margin: auto; width: 200px; height: 200px; } Code
22. CSS FlexBox Responsive Layout @media all and (max-width: 1200px){ .container { flex-wrap: wrap; } .main-item { flex: 0 1 100%; } .aside-item { flex: 0 1 100%; } .main-item { order: 1; } .aside-1 { order: 2; } .aside-2 { order: 3; } } Code .container { display: flex; } .main-item { flex: 3 1 0;} .aside-item { flex: 1 1 0;} Code Header Main Footer Aside 2 Aside 1 .container Header Main Footer Aside 2 Aside 1 .container
24.  Basics Concepts  Container Properties  Item Properties  3 Practical Examples  FlexBox Compatibility CSS FlexBox Summary
25. CSS FlexBox 3 different specifications  2009 Syntax [Old Version]  e.g. display: box;  2011 Syntax [Tweener Version]  e.g. display: flexbox;  2012 Syntax [Latest Version] E.g: display: flex;
26. CSS FlexBox Browser Support (2) Desktop Browsers (Feb 2015, dark green is 2012 spec)
27. CSS FlexBox Browser Support (3) Mobile Browsers (Feb 2015)
28. CSS FlexBox Browser Support (3) Stats (Feb 2015)
30. CSS FlexBox Other resources  CSS Tricks tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/  Mozilla Tutorial: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes  Sketching with css CheatSheet: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html  Flexbox Bugs: https://github.com/philipwalton/flexbugs  Official Specification: http://www.w3.org/TR/css3-flexbox
31. Questions?