我有一个简单的2列布局,我想使用FlexBox达到相同的高度:
@H_404_8@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_404_8@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_404_8@dio ut nibh viverra fermentum.原文链接:https://www.f2er.com/html/426541.html