css3基础---flex新版与旧版
1.flex基础点
---什么是容器，什么是项目，什么是主轴，什么是侧轴？
---项目永远排列在主轴的正方向上
---flex分新旧两个版本
-webkit-box
-webkit-flex / flex
2.注意点
---我们都知道新版本的flex要比老版本的flex强大很多，有没有必要学习老版本的flex？
移动端开发者必须要关注老版本的flex
因为很多移动端设备内核低只老版本的flex
---老版本的box通过两个属性四个属性值控制了主轴的位置和方向
新版本的flex通过一个属性四个属性值控制了主轴的位置和方向
===========================================================================================
3.老版本
容器
容器的布局方向
-webkit-box-orient:horizontal/vertical
控制主轴是哪一根
horizontal：x轴
vertical ：y轴
容器的排列方向
-webkit-box-direction：normal/reverse
控制主轴的方向
normal：从左往右（正方向）
reverse：从右往左（反方向）
富裕空间的管理
只决定富裕空间的位置，不会给项目区分配空间
主轴
-webkit-box-pack
主轴是x轴
start：在右边
end: 在左边
center：在两边
justify：在项目之间
主轴是y轴
start：在下边
end：在上边
center：在两边
justify：在项目之间
侧轴
-webkit-box-algin
侧轴是x轴
start：在右边
end： 在左边
center：在两边
侧轴是y轴
start：在下边
end： 在上边
center：在两边
===========================================================================================
4.新版本
容器
容器的布局方向
容器的排列方向
flex-direction
控制主轴是哪一根，控制主轴的方向
row; 从左往右的x轴
row-reverse;从右往左的x轴
column; 从上往下的y轴
column-reverse;从下往上的y轴
富裕空间的管理
只决定富裕空间的位置，不会给项目区分配空间
主轴
justify-content
flex-start： 在主轴的正方向
flex-end: 在主轴的反方向
center： 在两边
space-between： 在项目之间
space-around： 在项目两边
侧轴
align-items
flex-start：在侧轴的正方向
flex-end： 在侧轴的反方向
center： 在两边
baseline 基线对齐
stretch 等高布局（项目没有高度）
===========================================================================================
旧版本
弹性空间管理
将主轴上的富裕空间按比例分配到项目上!
-webkit-box-flex弹性空间的管理：将富裕空间按比例分配到各个项目上
-webkit-box-flex: 1;
默认值:0 不可继承
**********************************************************************************************************************************************
新版本
flex-grow: 1
原文：https://www.cnblogs.com/leiyanting/p/14989999.html