flex
是flex-grow
、flex-shrink
、flex-basis
的缩写组合。所以flex
的默认值为上面三个属性值的组合。
.item{ flex:0 1 auto; }
.item{
flex-grow:0;
flex-shrink:1;
flex-basis:auto;
}
- 当
flex
取值为none,则计算值为0 0 auto
.item{ flex:none; }
.item{
flex-grow:0;
flex-shrink:0;
flex-basis:auto;
}
- 当
flex
取值为auto,则计算值为1 1 auto
.item{ flex:auto; }
.item{
flex-grow:1;
flex-shrink:1;
flex-basis:auto;
}
- 当
flex
取值为一个非负数字,则该数字为flex-grow
值,flex-shrink
取 1,flex-basis
取 0%
.item{ flex:2; }
.item{
flex-grow:2;
flex-shrink:1;
flex-basis:0%;
}
- 当
flex
取值为一个长度或百分比,则视为flex-basis
值,flex-grow
取 1,flex-shrink
取 1(注意 0% 是一个百分比而不是一个非负数字)
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
- 当
flex
取值为两个非负数字,则分别视为flex-grow
和flex-shrink
的值,flex-basis
取 0%
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
- 当
flex
取值为一个非负数字和一个长度或百分比,则分别视为flex-grow
和flex-basis
的值,flex-shrink
取 1
.item {flex: 2 24px;}
.item {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 24px;
}
关于flex-basis
还没有看懂,以后再深入看,O(∩_∩)O哈哈~
注:flex-grow
、flex-shrink
、flex-basis
详解见 https://blog.csdn.net/Bambi12/article/details/88643746
参考文档:
https://blog.csdn.net/fengyjch/article/details/79047908