CSS技巧之Flex布局学习笔记

【学习教材】
阮一峰Flex布局教程（语法篇、实例篇）
语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
实例篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
【Flex属性速查】
1.定义：
容器：display:flex;
行内元素：display:inline-flex;
webkit内核浏览器：display:-webkit-flex;
2.容器属性：
1）flex-direction: row | column | row-reverse | column-reverse
2）flex-wrap: nowrap | wrap | wrap-reverse
3）flex-flow: <flex-direction> || <flex-wrap> //默认为row nowrap
4）justify-content: flex-start | flex-end | center | space-between | space-around;
5）align-items: flex-start | flex-end | center | baseline | stretch;
6）align-content: flex-start | flex-end | center | space-between | space-around | stretch

3. 项目属性：
   1）order: <integer>
   2）flex-grow: <number>
   3）flex-shrink: <number>
   4）flex-basis: <length> | auto
   5）flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
   6）align-self: auto | flex-start | flex-end | center | baseline | stretch;