CSS 具有一个固定列宽的 Flexbox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41568111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox with one fixed column width
提问by RGriffiths
I am trying to acheive a flexboxwith two columns, the left that is of a fixed width and the right that scales as the page size is altered. For example:
我试图flexbox用两列来实现，左边是固定宽度，右边随着页面大小的改变而缩放。例如：
<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>
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?
这在一定程度上有效，但感觉不对，因为我混合了 px 和 %。这样做是否不正确，如果是这样，什么可能是更好的解决方案？
EDIT Classes naming issue was a typo and now fixed.
编辑类命名问题是一个错字，现在已修复。
回答by Nenad Vracar
Instead of setting width in %on right column you can just use flex: 1and it will take rest of free width in a row.
%您可以使用flex: 1而不是在右列中设置宽度， 它将连续占用剩余的自由宽度。
.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>回答by Johannes
You can use flex-grow: 1on the non-fixed-width element to allow it to grow (and no width setting).
您可以flex-grow: 1在非固定宽度元素上使用以允许它增长（并且没有宽度设置）。
.flex_container {
display: flex;
width: 100%;
}
.flex_item_left {
width: 200px;
background: #fa0;
}
.flex_item_right {
background: #0fa;
flex-grow: 1;
}<div class="flex_container">
<div class="flex_item_left">
.....
</div>
<div class="flex_item_right">
.....
</div>
<div>