flex属性是 flex-grow + flex-shrink + flex-basis 的缩写
.item {
flex: 100 200 300px;
}
// 等价于
.item {
flex-grow: 100;
flex-shrink: 200;
flex-basis: 300px;
}
.item {
flex: auto;
}
//等价于
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.item {
flex: none;
}
// 等价于
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
// 该数字为 flex-grow 值,而flex-shrink 的值取 1,flex-basis 取 0%:
.item {
flex: 1;
}
// 等价于
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
// 将长度或百分比设为 flex-basis 值,而flex-grow 取 1,flex-shrink 取 1
.item1 {
flex: 0%;
}
// 等价于
.item1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
// -----------------
.item2 {
flex: 24px;
}
// 等价于
.item2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
// 将两个数字分别设为 flex-grow 和 flex-shrink 的值,而flex-basis 取 0%
.item {
flex: 10 20;
}
// 等价于
.item {
flex-grow: 10;
flex-shrink: 20;
flex-basis: 0%;
}
// 将非负数字和 长度或百分比 分别设为 flex-grow 和 flex-basis 的值,flex-shrink 取 1
.item {
flex: 10 100px;
}
// 等价于
.item {
flex-grow: 10;
flex-shrink: 1;
flex-basis: 100px;
}
flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性有关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况:
举一个不同的值之间的区别:
<div class="parent">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
<style type="text/css">
.parent {
display: flex;
width: 600px;
}
.parent > div {
height: 100px;
}
.item-1 {
width: 140px;
flex: 2 1 0%;
background: blue;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: darkblue;
}
.item-3 {
flex: 1 1 200px;
background: lightblue;
}
</style>
0% 即 0 宽度 auto 对应取主尺寸即 100px
item-1 和 item-2 各分配 2/5,各得 120px item-3 分配 1/5,得 60px
各项目最终宽度为: