我有一个简单的2列布局,我想使用FlexBox达到相同的高度：
@H_301_7@
CSS
body { color: red; }
.flex { display: flex; }
aside { background: #000; height: 100%; }
这适用于Firefox,但不适用于Chrome：here’s a Fiddle
我尝试了一些东西(包括供应商前缀),但它仍然无效.
最佳答案
要使用Flexbox创建两个相等的列：
>父容器获得display：flex
>每个列都由div创建,它们变为flex：1来增长/缩小
要拉伸第一列的子项：
>第一列也给出了display：flex,这样它的子节点就可以具有flex属性并且可以增长
>旁边的孩子屈服于：1并且会成长/缩小
This is the easiest guide to Flexbox you could ask for.
FlexBox兼容性：IE11+ and all modern browsers.
例
使用Bootstrap：Here is the fiddle from your comment with my changes added.使用div.flex.row删除左侧的1px间隙：之前,div.flex.row：在{display：none}之后
相关答案：Remove 1px gap when using display:flex in Chrome
我删除了这个例子的所有不必要的类.目前,两个列高度均由最高列确定.您还可以让列填充页面的整个高度,高度为：灵活容器上的100vh – read more about viewport units here.
视口单元兼容性：Viewport Units are almost well supported.
要为列提供更大的宽度,请为其提供更大的弹性值.我已将此示例中的第二列更改为flex：3,它将更宽.
@H_301_7@body {
color: red;
margin: 0;
}
.flex {
display: flex;
/*Should the columns span the entire height of the page? Use:
height: 100vh;*/
}
.column {
flex: 1;
}
.column:first-child {
display: flex;
}
.column:last-of-type {
background: #000;
flex: 3;
}
aside {
flex: 1;
background: #F90;
}
@H_301_7@dio ut nibh viverra fermentum.
原文链接：https://www.f2er.com/html/426541.html
