七、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
注意:当主轴是默认方向时,伸缩项扩充或压缩的是宽度,当主轴方向改为竖直方向时,伸缩项扩充或压缩的是高度,计算的方式都相同。
十、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
网友评论