flex 项目属性（一） | 每天学一点flex
“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 17 天，点击查看活动详情
Flexbox布局有两种主要的组件：容器（container）和项目（item）。项目属性指的是项目元素上设置的一些布局属性，这些属性将会影响项目在容器中的布局。
接下来我们来看一下部分项目属性，order、flex-grow、flex-shrink 属性。
项目属性
1. order 属性
order 属性用于定义项目的排列顺序，数值越小，排列越靠前，默认为 0。
示意图如下：
来看一个具体的示例：
/* 容器 css */
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
}
/* 项目 css */
.item {
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
color: white;
}
/* 每个项目背景颜色 */
.one {
background-color: red;
order: 1; /* 将该项目的 order 设置为 1 */
}
在上面的代码中，我们将项目中的其中一个项目 order 值设置为 1，由于其他项目的 order 值默认都是 0，所以该项目会跑到最后面。
效果如下：
2. flex-grow 属性
flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。
如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
示意图如下：
这里我们将项目的 flex-grow 属性值设置为 1，让它们平均分配剩余空间，然后将其中一个项目的 flex-grow 属性值设置为 11，让它比其他项目所分配到的剩余空间要多十倍。
具体代码如下：
/* 容器 css */
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
}
/* 项目 css */
.item {
width: 30px;
height: 60px;
text-align: center;
line-height: 60px;
color: white;
flex-grow: 1; /* 设置项目的扩展属性为 1 */
}
/* 每个项目背景颜色 */
.one {
background-color: red;
flex-grow: 11; /* 单独设置这个项目的扩展属性为 11 */
}
效果如下：
3. flex-shrink 属性
flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。
注：负值对该属性无效。
示意图如下：
这里我们首先将项目的宽度设置为 150px，这样容器空间不够会自动压缩项目的宽度。
然后我们对其中一个项目的 flex-shrink 属性设值为 0，可以理解为缩小设置为假（false），让该项目不压缩。
具体的代码如下：
/* 容器 css */
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
}
/* 项目 css */
.item {
width: 150px; /* 将盒子宽度改为 150px，默认一排装不下就会压缩盒子 */
height: 60px;
text-align: center;
line-height: 60px;
color: white;
}
/* 每个项目背景颜色 */
.one {
background-color: red;
flex-shrink: 0; /* 该盒子的 flex-shrink 值设置为 0，表示不压缩该盒子 */
}
效果：
