The Flexible Box Layout Module makes it easier to design a flexible responsive layout structure without using float or positioning in CSS

1. Flex layout
CSS

2. Why
● display + Position + float
● Difficult to solve just use CSS
● Vertical Center
● Extension of content

3. WEB
布局发展
表格布局
浮动布局
定位布局
Flex布局
Grid布局

4. What
● W3C 2009
● Flexible Box (CSS3)
● float clear vertical-align

5. Flexbox规范
大事年表
2009 年 7 月 工作草案（display: box;）
2011 年 3 月 工作草案（display: flexbox;）
2011 年 11 月 工作草案（display: flexbox;）
2012 年 3 月 工作草案（display: flexbox;）
2012 年 6 月 工作草案（display: flex;）
2012 年 9 月 候选推荐（display: flex;）

6. How
.container {
display: flex | inline-flex
}

7. Concepts

8. container attribute
● flex-direction
● flex-wrap
● flex-flow
● justify-content
● align-items
● align-content

9. item attribute
● order
● flex-grow
● flex-shrink
● flex-basis
● flex
● align-self

10. SCB

11. Cross-browser
can i use flex

12. Thank you