具有固定列宽的Flexbox [英] Flexbox with one fixed column width

问题描述

我正在尝试实现具有两列的 flexbox ，左边是固定宽度，右边是随着页面大小的改变而缩放。例如：

I am trying to acheive a flexbox with two columns, the left that is of a fixed width and the right that scales as the page size is altered. For example:

<style>
    .flex_container {
        display: flex;
        width: 100%;
    }

    .flex_col_left {
        width: 200px;
    }
    .flex_col_right {
        width: 85%;
    }
</style>

<div class = "flex_container">
    <div class = "flex_col_left">
        .....
    </div>
    <div class = "flex_col_right">
        .....
    </div>
<div>

这在一定程度上可行，但是由于我将px和％混合在一起，感觉不对。以这种方式这样做是不正确的，如果可以的话，这是一个更好的解决方案吗？

This works to an extent but it does not feel right as I am mixing px and %. Is it incorrect to do it this way and if so what might be a better solution?

EDIT类命名问题是一个错字，现在已经解决。

EDIT Classes naming issue was a typo and now fixed.

推荐答案

您可以使用％中设置宽度> flex：1 ，它将连续占用其余的自由宽度。

Instead of setting width in % on right column you can just use flex: 1 and it will take rest of free width in a row.

.flex_container {
  display: flex;
  width: 100%;
}
.flex_item_left {
  width: 200px;
  background: lightgreen;
}
.flex_item_right {
  flex: 1;
  background: lightblue;
}

<div class="flex_container">
  <div class="flex_item_left">
    .....
  </div>
  <div class="flex_item_right">
    .....
  </div>
  <div>

这篇关于具有固定列宽的Flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！