使用flexbox，我可以有一个固定宽度的列和一个占据其余宽度的列吗

Question

目前我有一些类似于下面代码的东西。我试图使红色列不负责任，设置宽度为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>

Answer 1

是，将固定列设置为flex-grow: 0(使其不增长(、flex-shrink: 0(使其不会收缩(和flex-basis: 300px(使其固定在300px(。

jsFiddle演示

.specific-image-container {
display: flex;
}
.specific-image-column {
flex: 1;
background-color: blue;
}
.more-images-column {
flex: 0 0 300px; /* new */
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>

Answer 2

在不负责任的元素上设置flex-shrink: 0; width: 300px;，在灵活的元素上设定flex-grow: 1;。一旦完成了flex属性，就可以去掉它。

Answer 3

尝试使用flex-basis规则。您可以使用此规则来代替flexbox元素中的宽度。您还可以使用calc将第一列设置为100%-300px，以确保300px具有优先级。

.specific-image-container {
display: flex;
position: relative;
width: 100%;
}
.specific-image-column {
flex-basis: calc(100% - 300px);
background-color: blue;
}
.more-images-column {
flex-basis: 300px;
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>