伸缩布局3(order、flex-grow、flex-shrin

七、order 伸缩项的排序顺序

每一个伸缩项都有一个默认的order，值为0，即order:0;当order值越大时排在越后面。所以，当你想把如下的伸缩项1排在最后面时，只要将1的order值设置的比2和3来的大就行了。

li:nth-of-type(1){
    background-color: red;
    order: 1;
}
li:nth-of-type(2){
    background-color: purple;
    order: 0;
}
li:nth-of-type(3){
    background-color: blue;
    order: 0;
}

image.png

八、flex-grow 伸缩项扩充 和扩充份数挂钩 默认为0

当所有伸缩项宽度的总和小于伸缩容器的总和时，在flex-grow的控制下，伸缩项会根据比例扩充，使得最终所有伸缩项宽度的总和填满伸缩容器。
flex-grow的默认值为0，伸缩项不扩充，以原有的宽度展示
当所有伸缩项宽度的总和大于伸缩容器时，flex-grow属性失效

/*ul的宽度为600px*/
ul{
    width: 600px;    伸缩容器的宽度
    height: 400px;
    border:1px solid #000;
    display: flex;
    margin: 100px;   
}
li{
    width: 100px;     每个伸缩项的宽度
    height: 100px;
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
}
li:nth-of-type(1){  
    background-color: red;
    flex-grow: 1;     扩充了1份
}
li:nth-of-type(2){
    background-color: rebeccapurple;
    flex-grow: 2;     扩充2份
}
li:nth-of-type(3){
    background-color: royalblue;
    flex-grow: 3;    扩充3份

image.png
flex-grow扩充的公式
1.伸缩容器的总和 - 伸缩项宽度的总和 = 多出的宽度
600 - (100 * 3) = 300
2.多出的宽度 / 扩充的份数 = 每份扩充的宽度
300 / (1 + 2 + 3) = 50
3.伸缩项的宽度 = 原有的宽度 +扩充的宽度
伸缩项1的宽度 = 100 + 50 * 1 = 150px
伸缩项2的宽度 = 100 + 50 * 2 = 200px
伸缩项1的宽度 = 100 + 50 * 3 = 250px
image.png
image.png
image.png

九、flex-shrink 伸缩项压缩 与压缩的份数挂钩 默认为1

当所有伸缩项宽度的总和大于伸缩容器的总和时，在flex-shrink 的控制下，伸缩项会根据比例压缩，使得最终所有伸缩项宽度的总和填满伸缩容器。
flex-shrink的默认值为1，当伸缩容器宽度的总和大于伸缩容器时，按比例压缩
当所有伸缩项宽度的总和小于伸缩容器时，flex-shrink属性失效
flex-shrink :0; 伸缩项不压缩

/*ul的宽度为600px*/
ul{
    width: 600px;    伸缩容器的宽度
    height: 400px;
    border:1px solid #000;
    display: flex;
    margin: 100px;   
}
li{
    width: 300px;     每个伸缩项的宽度
    height: 100px;
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
}
li:nth-of-type(1){  
    background-color: red;
    flex-shrink: 1;     压缩了1份
}
li:nth-of-type(2){
    background-color: rebeccapurple;
    flex-shrink: 2;     压缩2份
}
li:nth-of-type(3){
    background-color: royalblue;
    flex-shrink: 3;    压缩3份

image.png

flex-shrink压缩的公式
1.伸缩项宽度的总和 - 伸缩容器的总和 = 溢出的宽度
300 * 3 - 600 = 300
2.计算权重值
每个伸缩项需要压缩的份数 * 当前伸缩项的宽度 然后相加
1 * 300 +2 * 300 + 3 * 300 = 1800
3.计算每个伸缩项需要压缩的宽度
(溢出宽度 * 每个伸缩项需要压缩的份数 * 当前伸缩项的宽度) / 权重值
伸缩项1压缩的宽度 = (300 * 1 * 300) / 1800 = 50px
伸缩项2压缩的宽度 = (300 * 2 * 300) / 1800 = 100px
伸缩项1压缩的宽度 = (300 * 3 * 300) / 1800 = 150px
4.计算每个伸缩项的宽度
伸缩项1的宽度 = 300 - 50 = 250px
伸缩项2的宽度 = 300 - 100 = 200px
伸缩项1的宽度 = 300 - 150 = 150px

image.png
image.png
image.png

注意：当主轴是默认方向时，伸缩项扩充或压缩的是宽度，当主轴方向改为竖直方向时，伸缩项扩充或压缩的是高度，计算的方式都相同。

十、flex-basis 设置伸缩项宽度

1.在伸缩布局中设置了flex-basis 和 width 系统会先采用flex-basis的数值，即flex-basis的优先级比width高

li{
    width: 300px; 
    height: 100px;
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}
li:nth-of-type(1){
    background-color: red;
    flex-basis: 100px;
}
li:nth-of-type(2){
    background-color: rebeccapurple;
    flex-basis: 150px;
}
li:nth-of-type(3){
    background-color: royalblue;
    flex-basis: 300px;
}

image.png

2.在伸缩布局中，若采用flex-basis和width设置宽度，其中一个设置了auto,另一个是具体值，伸缩项会按具体值得宽度展示

li:nth-of-type(1){
    background-color: red;
    flex-basis: 100px;
    width: auto;
}
li:nth-of-type(2){
    background-color: rebeccapurple;
    flex-basis: auto;
    width: 200px;
}
li:nth-of-type(3){
    background-color: royalblue;
    flex-basis: auto;
    width: 100px;
}

image.png
image.png

十一、伸缩项属性连写

flex：grow shrink basis;
扩充 压缩 宽度
默认值 flex:0 1 auto；

我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com