具有固定列宽的Flexbox [英] Flexbox with one fixed column width
本文介绍了具有固定列宽的Flexbox的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试实现具有两列的 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屋!
查看全文