flex布局怎么实现的（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：在两边

项目

弹性空间管理

-webkit-box-flex：弹性因子（默认值为0）

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： 在两边

base#ne 基线对齐

stretch 等高布局（项目没有高度）

项目

弹性空间管理（）

flex-grow：弹性因子（默认值为0）

5.新版本新增的

容器

flex-wrap：控制的是侧轴的方向

nowrap 不换行

wrap 侧轴方向由上而下 （flex-shrink失效）

wrap-reverse 侧轴方向由下而上 （flex-shrink失效）

align-content：多行/列时侧轴富裕空间的管理（把多行/列看成一个整体）

flex-flow：flex-direction和flex-wrap的简写属性

本质上控制了主轴和侧轴分别是哪一根，以及他们的方向

项目

order:控制项目的排列顺序

align-self：项目自身富裕空间的管理

flex-shrink：收缩因子（默认值为1）

flex-basis：伸缩规则计算的基准值（默认拿width或height的值）

6.伸缩规则

flex-basis（默认值为auto）

flex-grow（默认值为0）

可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)

可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)

每项伸缩大小 = (伸缩基准值flex-basis (可扩展空间 x flex-grow值))

flex-shrink（默认值为1）

--.计算收缩因子与基准值乘的总和

var a = 每一项flex-shrink*flex-basis之和

--.计算收缩因数

收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和

var b = (flex-shrink*flex-basis)/a

--.移除空间的计算

移除空间= 项目收缩因数 x 负溢出的空间

var c = b * 溢出的空间

7.侧轴富裕空间的管理

单行单列

align-items

align-self（优先级高）

多行多列

align-content

8.flex的简写属性

flex:1 (flex-basis:0% flex-grow:1 flex-shrink:1)

等分布局

,