flex布局总结

１　基本概念：（1）多层div嵌套，中间层的div既是容器，又是子元素（阮大神称之为项目）。（2）主轴，通常是X轴，水平方向（下面以此坐标轴状态为例）

２　我认为作用在容器上的属性应该是７个，第一个也是最重要的：display:flex    还有inline-flex;

       阮大神说的作用在窗口上的６个属性(第一个值为默认值），用于控制子元素的布局，感觉最有用的是flex-direction：

• flex-direction　  方向　 row | row-reverse | column | column-reverse;
• flex-wrap　　    换行     nowrap | wrap | wrap-reverse;
• flex-flow        　 方向 || 换行　如：row || nowrap
• justify-content　主轴对齐  所有子元素进行靠左、靠右或分散对齐。flex-start | flex-end | center | 
                                                                                                                 space- between | space-around;
• align-items       交叉轴对齐  每个子元素靠上、靠下、纵向居中、拉伸   flex-start | flex-end | center |
                                                                                                                  baseline | stretch;
• align-content    子元素wrap的情况下形成多行子元素，此时才起作用    flex-start | flex-end | center | space-between | space-around | stretch;

3　作用在子元素上的6个属性。感觉最有用的是flex:auto，可以让页面饱满些。　

• order      子元素的先后顺序， 默认值是0的integer。感觉一般用不上。
• flex-grow   子元素的放大比例， 默认值是0（不放大）的number。如：flex-grow: 2; 　     
• flex-shrink  子元素的缩小比例， 默认值是1（空间不足就缩小）的number。
• flex-basis  子元素缩小或放大前的宽度， 默认值是auto即本来大小。如：flex-basis:350px。 
• flex  　　  简写表示flex-grow, flex-shrink 和 flex-basis。  
               推荐使用： flex：auto (即1 1 auto) 和 flex:none (即0 0 auto)。 
• align-self  允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex布局总结

原文：https://www.cnblogs.com/pu369/p/12511506.html