html–Chrome中的等高Flexbox列

概述我有一个简单的2列布局,我想使用Flexbox达到相同的高度：HTML<div class='row flex'> <!-- menu --> <div class='col-xs-4'> <aside> Menu goes here &l

我有一个简单的2列布局,我想使用FlexBox达到相同的高度：

HTML

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.
要为列提供更大的宽度,请为其提供更大的d性值.我已将此示例中的第二列更改为flex：3,它将更宽.
body {  color: red;  @R_403_5553@: 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;}
          总结       
以上是内存溢出为你收集整理的html  –  Chrome中的等高Flexbox列全部内容，希望文章能够帮你解决html  –  Chrome中的等高Flexbox列所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: https://www.outofmemory.cn/web/1124800.html