本文共 2458 字，大约阅读时间需要 8 分钟。

-----------------学习笔记---------------

1.老版本与新版本本质上的一些差异

（1）老版本没有“换行”、“收缩”，也就是说老版本的容器只能放一行item，且当一行放不下时，既不会换行，也不会收缩，而是选择溢出。 （2）老版本由于没有“换行”，因此侧轴没有方向而言，只有哪一根是侧轴而已。

2.老版本属性

【容器】display:-webkit-box 【容器】【主轴是哪一根】-webkit-box-orient: horizontal(默认值) | vertical 【容器】【主轴方向】-webkit-box-direction:normal(默认值) | reverse 【容器】【富裕空间管理-主轴】-webkit-box-pack:start(默认值) | end | center | justify  【容器】【富裕空间管理-侧轴】-webkit-box-align:start(默认值) | end |center

【项目】【弹性空间管理】-webkit-box-flex:number 默认值0 不可继承

3.新版本属性

【容器】display:flex | -webkit-flex（当它成为标准时就去掉了-webkit前缀） 【容器】【主轴是哪一根&主轴的方向】flex-direction:row | column | row-reverse | column-reverse 【容器】【富裕空间管理-主轴】justify-content:flex-start(默认值) | flex-end | center | space-between | space-around 【容器】【富裕空间管理-侧轴-单行/单列一个整体】align-items:stretch(默认值，等高布局) | flex-start| flex-end | center | baseline(基线对齐) 【容器】【富裕空间管理-侧轴-多行/多列一个整体】align-content:stretch(默认值) | flex-start | flex-end | center | space-between | space-around 【容器】【是否换行，侧轴方向】flex-wrap:nowrap(默认值) | wrap | wrap-reverse 【容器】【简写属性，主轴和侧轴分别为哪一根以及方向】flex-flow:flex-direction flex-wrap

【项目】【item优先级，越小越靠前】order:number，默认值0，不可继承

【项目】【富裕空间管理-侧轴-当前item】align-self:auto(默认值，设置父元素align-items，若无父元素则stretch) | stretch | flex-start| flex-end | center | baseline 【项目】【弹性空间管理-伸缩基准-mainSize初始大小】flex-basis:auto(默认值，设置为默认width/height)，不可继承 【项目】【弹性空间管理-伸】flex-grow:number，初始值为0 【项目】【弹性空间管理-缩】flex-shrink:number,初始值为1，只有flex-basis不为0且flex-wrap不为wrap也不为wrap-reverse生效 【项目】【简写属性】flex:包含了三个属性flex-grow flex-shrink flex-basis，    flex: none;/* 0 0 auto */  flex：1;/* 1 1 0% */                     flex:2;等价于flex-grow:2;flex-shrink:1;flex-basis:0%;用于实现等宽布局（主轴方向上等尺寸）

4.新版本富裕空间管理

（1）如果是单行/单列，那么align-content不起作用，取决于align-items和align-self，其中align-self优先级更高。 （2）如果是多行/多列，那么align-items和align-self不起作用，取决于align-content

5.新版本空间管理计算 （1）富裕空间管理     只决定富裕空间的位置，不会给项目区分配空间 （2）弹性空间管理规则         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 负溢出的空间（所有相邻项目flex-basis的总和-容器大小）                           var c =    b * 溢出的空间  （3）对弹性空间管理的说明     因为弹性空间管理中，无论是“伸”，还是“缩”，都与flex-basis密切相关，伸的条件是：(容器大小 - 所有相邻项目flex-basis的总和) > 0                                                                   缩的条件是：(容器大小 - 所有相邻项目flex-basis的总和) < 0      所以当flex-basis:0时，肯定是“伸”，不会是“缩”，所以flex-shrink生效的条件之一就是flex-basis不能为0，也就是上述可用空间为负值。     此外，如果flex-wrap为wrap或者wrap-reverse，那么就不会出现“缩”，因为已经利用换行来处理一行放不下的问题了。

 

转载地址：https://blog.csdn.net/qq_21428081/article/details/93310257 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！