我正在尝试设置一个包含三列的flexbox布局,其中左列和右列具有固定宽度,中心列弯曲以填充可用空间.
尽管为列设置了尺寸,但随着窗口缩小,它们似乎仍在缩小.
有谁知道怎么做到这一点？
我需要做的另一件事是根据用户交互隐藏右列,在这种情况下,左列仍将保持其固定宽度,但中间列将填充剩余的空间.
#container {
display: flex;
justify-content: space-around;
align-items: stretch;
max-width: 1200px;
}
.column.left {
width: 230px;
}
.column.right {
width: 230px;
border-left: 1px solid #eee;
}
.column.center {
border-left: 1px solid #eee;
}<div id="container">
<div class="column left">
<p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and …目前我有一些类似于下面的代码。我试图用 300px 的设置宽度使红色列无响应，但保持蓝色列的响应性。
.specific-image-container {
display: flex;
position: relative;
width: 100%;
}
.specific-image-column {
flex: 4;
background-color: blue;
}
.more-images-column {
flex: 1;
background-color: red;
}
.content {
height: 300px;
}<div class="specific-image-container">
<div class="specific-image-column">
<div class='content'></div>
</div>
<div class="more-images-column">
<div class='content'></div>
</div>
</div>