学习日记--flex:1 表示什么

转载：https://blog.csdn.net/lianfengzhidie/article/details/86679759 （原作者更详细）

flex属性是 flex-grow + flex-shrink + flex-basis 的缩写。

1.赋给3个值

.item {
    flex: 100 200 300px;
}
// 等价于
.item {
    flex-grow: 100;
    flex-shrink: 200;
    flex-basis: 300px;
}

2.赋值为auto

.item {
    flex: auto;
}
//等价于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

3.赋值为none

.item {
    flex: none;
}
// 等价于
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

4.赋值为非负数

// 该数字为 flex-grow 值，而flex-shrink 的值取 1，flex-basis 取 0%：
 
.item {
    flex: 1;
}
// 等价于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

5.赋值为一个长度或百分比

// 将长度或百分比设为 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;
}

6.赋值为两个非负数

​// 将两个数字分别设为 flex-grow 和 flex-shrink 的值，而flex-basis 取 0%
 
.item {
   flex: 10 20;
}
// 等价于
.item {
    flex-grow: 10;
    flex-shrink: 20;
    flex-basis: 0%;
}

7.赋值为一个非负数和一个长度或百分比

​​// 将非负数字和 长度或百分比 分别设为 flex-grow 和 flex-basis 的值，flex-shrink 取 1
 
.item {
   flex: 10 100px;
}
// 等价于
.item {
    flex-grow: 10;
    flex-shrink: 1;
    flex-basis: 100px;
}