弹性项目的动态尺寸
现在让我们回到第一个示例，看看如何控制弹性项目相对于其他弹性项目所占的空间比例。
弹性盒子示例
第一篇文章
内容
第二篇文章
内容
第三篇文章
内容
body {
font-family: sans-serif;
margin: 0;
}
header {
background: purple;
height: 100px;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
article {
padding: 10px;
margin: 10px;
background: aqua;
}
section {
zoom: 0.8;
display: flex;
}
在本地副本中，将以下规则添加到 CSS 文件末尾：
cssarticle {
flex: 1;
}
这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。本例中，我们设置
弹性盒子示例
第一篇文章
内容
第二篇文章
内容
第三篇文章
内容
body {
font-family: sans-serif;
margin: 0;
}
header {
background: purple;
height: 100px;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
article {
padding: 10px;
margin: 10px;
background: aqua;
}
section {
zoom: 0.8;
display: flex;
}
article {
flex: 1;
}
现在在上一个规则后面添加：
cssarticle:nth-of-type(3) {
flex: 2;
}
现在当你刷新，你会看到第三个
你还可以指定 flex 的最小值。尝试修改现有的 article 规则如下：
弹性盒子示例
第一篇文章
内容
第二篇文章
内容
第三篇文章
内容
body {
font-family: sans-serif;
margin: 0;
}
header {
background: purple;
height: 100px;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
article {
padding: 10px;
margin: 10px;
background: aqua;
}
section {
zoom: 0.8;
display: flex;
}
cssarticle {
flex: 1 100px;
}
article:nth-of-type(3) {
flex: 2 100px;
}
这表示“每个 flex 项将首先给出 100px 的可用空间，然后，剩余的可用空间将根据分配的比例共享”。尝试刷新，你会看到分配空间的差别。
所有弹性项目都有 100 像素的最小宽度——这是通过“flex”属性设置的。前两个弹性项目的 flex 值为 1，第三个弹性项目的 flex 值为 2。这将弹性容器中的剩余空间划分为 4 个比例单位。前两个弹性项目各分配 1 个单位，第三个弹性项目分配 2 个单位，因此第三个弹性项目的宽度大于另外两个（它们的宽度相同）。
弹性盒子的真正价值体现在其灵活性与响应性上。无论调整浏览器窗口大小，还是添加另一个