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

Posted 2023-03-05

【中文标题】使用 flexbox，我可以有 1 个固定宽度的列和 1 个占用其余宽度的列吗？ [复制]

【英文标题】：Using flexbox, can I have 1 fixed-width column and 1 column that takes the rest of the width? [duplicate]

【发布时间】：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>

【参考方案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 属性。