【问题标题】: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 属性。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-04-03
        • 2020-11-30
        • 1970-01-01
        • 2014-11-24
        • 2017-04-29
        • 2011-02-02
        相关资源
        最近更新 更多