参考阮一峰的文章：
语法：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
玲珑骰子案例：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
1.任何一个盒子：.box{display:flex;}，不止块级元素，行内元素也可以用flex.
2.注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
3.采用了flex布局的元素，称为flex容器。所有子元素自动成为容器成员（flex item）
4.主轴(main axis):main start,main end
侧轴（cross axis）:corss start, corss end
容器成员（flex item ）:main size,cross size(子元素的宽和高)
5.父容器的属性（6个属性）
flex-direction （切换主轴方向）
flex-wrap（控制子元素换行）
flex-flow（以上两个的综合写法，方向和是否换行）
justify-content（主轴 左中右）
align-items（侧轴 上中下）
align-content （多根轴线的时候）
父容器：
父：display:flex； 这个一设完，块级元素也会默认排成从左到右的一行。
父：flex-direction：row | row-reverse | column | column-reverse
默认主轴为水平方向时：
flex-direction:row; 控制子元素，贴着左边向右排列，左墙壁1,2,3
flex-direction:row-reverse;控制子元素，贴着右边向左排列，3,2,1右墙壁
flex-direction:column: 控制子元素，垂直方向，从左上开始 1，2,3
flex-direction:column-reverse;控制子元素，垂直方向，从左下开始，1在最下面
控制子元素换行的问题：
flex-wrap:nowrap | wrap | wrap-reverse;
父：flex-wrap：nowrap; 不换行
flex-wrap:wrap;换行，第一行在上面
flex-wrap:wrap-reverse;换行，排不下的第二行在上面
综合写法：flex-flow:<flex-direction> ||<flex-wrap>;
父：flex-flow:<flex-direction> ||<flex-wrap>;
子元素在主轴方向上的对齐方式：
父：justify-content:flex-start 如水平为主轴，则是贴左边，左边为start, 左1,2,3,
flex-end 贴右边，1,2,3右墙
center 居中
space-between 两端各贴左右边框，项目之间的间隔相等。
space-around 左右也不贴边框，类似于各个子盒子都有左右margin
子元素在侧轴方向上的对齐方式：
父：align-items:flex-start 贴上框 （侧轴的起点对齐）
flex-end 贴下框 （侧轴的终点对齐）
center 垂直方向，中间
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
如有多根轴线，如何定义对齐方式：
父：align-content:flex-start | flex-end | center | space-between | space-around | stretch;
子元素的一些属性：
子：
order（子盒子顺序）
flex-shrink
flex-grow
flex-basis
flex
align-self （子元素自己的对齐方式，与align-item一样）
子：order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。负数比0靠前。
子：flex-shrink：0，(默认1)
则比如说压缩浏览器窗口的时候，所有项目的flex-shrink属性都为1，就单独一个设置为0。则0的这位还是保持原来大小，其他被压缩。
子：flex-grow：0，（默认0）与上面的相反，如有多余空间会等分，然后放大自己。设了0就不会变化。
子：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
子：flex: flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
子：align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。属性值和slign-items一样。
网友评论