如何选择性地控制Flex项目的响应能力

Question

我有一个包含3个flex项的flex容器。我想这样做：

• 当压缩/缩小容器的宽度时，中间项目的宽度也会缩小，直到它的宽度为0px。

• 当您扩展/增长/增加容器的宽度时，中间项的宽度也会增长，直到它的宽度达到400px。

• 无论容器的宽度如何，左和右flex项的宽度都保持为400px。

我尝试过使用flex-shrink、flex-grow和flex-bases属性，左项和右项保持不变(很好！(，而中间项的宽度在164px到400px之间。我希望中间项目的最小宽度是0px，而不是164px。

以下是我迄今为止所尝试的：

<div id="flex-container">
<div id="item-1"></div>
<div id="item-2"></div>
<div id="item-3"></div>
</div>

和CSS：

#flex-container {
min-width: 800px;
max-width: 1200px;
height: 300px;
display: flex;
justify-content: center;
}
#item-1 {
height: 300px;
width: 400px;
background-color: red;
flex: 0 0 auto;
}
#item-2 {
height: 300px;
min-width: 0px
max-width: 400px;
background-color: green;
flex: 1 1 auto;
}
#item-3 {
height: 300px;
width: 400px;
background-color: blue;
flex: 0 0 auto;
}

谢谢！

Answer 1

在代码中，css第2项的最小宽度行中缺少分号(；(。检查这是否是造成问题的原因，因为我在电脑上检查了相同的代码，它的工作方式和你想要的一样。