新版flex布局新增属性

相对于旧版的flex'布局而言，新版的flex布局新增了很多旧版没有的属性，进而可以实现旧版flex实现不了的布局。

其实，严格来说，在旧版flex中，没有侧轴的概念，项目在容器中不会自己换行，即项目不会按照侧轴的方向进行堆砌，但是在新版的flex布局中，可以对侧轴进行更好的控制。

容器新增属性

flex-wrap：控制容器但是单行/列，多行/列，并且控制侧轴的方向，项目按照侧轴的方向进行堆砌

        属性值：nowrap（默认值---没有侧轴）  wrap（侧轴正方向）  wrap-reverse（侧轴反方向）

flex-content：控制容器多行、多列的富裕空间的管理

        属性值：flex-start、flex-end、center、space-between、baseline、stretch

flex-flow：控制主轴和侧轴的方向及其位置（flex-direction和flex-wrap的简写形式）

        属性值：row  wrap/ row wrap-reverse/ column wrap/ column wrap-reverse

容器新增属性体现在侧轴上

项目新增属性

order：控制项目在主轴上排列的顺序，值越大项目越往后靠

        属性值：num（数值）

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

        属性值：适用富裕空间管理的属性值

flex-shink：控制项目收缩的空间 （必须时单行，否则会失效）

        属性值：收缩因子（默认值：0）

flex-basis：伸缩规则计算的基准值（默认值为项目的width/height）

        属性值：num（数值）

flex：flex的简写形式

        属性值：num（数值）

        通常flex：1  实现等分布局

flex：1  ---表示---  flex-grow：1   flex-shrink：1   flex-basis：0

实现经典等分布局

伸缩的规则

flex-grow（伸缩—项目空间扩大）

a.可用空间 = 容器大小—所有相邻flex-basis的总和

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

---可扩展空间和富裕空间：二者不同

         当flex-basis的值为默认值（项目的width/height），富裕空间就是可扩展空间；当flex-basis不为默认值，富裕空间是富裕空间，可扩展空间是可扩展空间

c.每项伸缩大小 = 伸缩基准值（flex-basis）+（可扩展空间*flex-grow）

flex-shrink（收缩—项目空间缩小）

a.计算收缩因子*基准值的总和

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

b.计算收缩因数

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

     b = （ flex-shrink*flex-basis）/a

c.移除空间的计算

      移除空间 = 项目收缩因数 * 负溢出的空间（收缩嘛所以是负的 好理解一点）

      c = b * 溢出的空间

 

flex布局的注意点

1.侧轴的富裕空间管理

a.单行/列

align-items：单行/列的富裕空间

align-self：管理项目自身的富裕空间（单行/列的富裕空间）  优先级比align-items高

b.多行/列

align-content：多行/列的富裕空间

2.旧版的flex的富裕空间管理

旧版富裕空间管理（-webkit-box-flex）：只是管理富裕空间的位置，并不会分配到项目身上

3.容器和项目的概念

容器：外层的包裹器

      布局排列方向：控制主轴的方向和位置（flex-direction）

      富裕空间管理：主轴富裕空间、侧轴富裕空间（单行的 align-items）、多行/多列的富裕空间管理（align-content）

      侧轴：控制多行多列，就存在侧轴的概念了（flex-wrap）

项目：容器里的元素

      项目可以弹性空间的管理：就是把富裕空间按照一定的比列分配给项目

      收缩、伸缩：flex-grow、flex-shrink

      收缩、伸缩的基准：flex-basis

      改变项目的排列的先后顺序（项目永远是按照主轴的正方向排列）：order属性

 

      

 

总结

学习了两天的flex布局，主要是要理解四个概念，一个规则。万变不离其宗。

什么是容器？什么是项目？哪个是主轴？哪个是测轴？项目永远按照主轴的正方向排列。

这些是基础中的基础，这里理解了才能往下学习啊。在学习新版flex新增的属性中，主要是学习容器和项目的API,还有一部分的重难点就是收缩和伸缩规则，在计算时，会有一些隐晦，要加强理解。

对比着学习是一种不错的学习方式，要继续努力了！！！