使用 flexbox，我可以有 1 个固定宽度的列和 1 个占用其余宽度的列吗？ [复制]答案

【问题标题】：Using flexbox, can I have 1 fixed-width column and 1 column that takes the rest of the width? [duplicate]使用 flexbox，我可以有 1 个固定宽度的列和 1 个占用其余宽度的列吗？ [复制]
【发布时间】：2018-12-26 22:00:55
【问题描述】：

目前我有一些类似于下面的代码。我试图使红色列无响应，设置宽度为 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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

是的，将固定列设置为flex-grow: 0（因此它不会增长）、flex-shrink: 0（因此它不会缩小）和flex-basis: 300px（因此它保持固定在 300 像素）。

jsFiddle demo

.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>

【讨论】：

工作就像一个魅力！
@michael 这个已经有太多骗子了；）
好吧@dippas..你是对的..我应该先看看周围

【解决方案2】：

尝试使用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>

【讨论】：

【解决方案3】：

在无响应元素上设置flex-shrink: 0; width: 300px;，在灵活元素上设置flex-grow: 1;。完成此操作后，您可以删除 flex 属性。

【讨论】：