html – Chrome中的等高Flexbox列

我有一个简单的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.

要为列提供更大的宽度,请为其提供更大的弹性值.我已将此示例中的第二列更改为flex：3,它将更宽.

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;
}

disse consequat ut metus ut cursus.
      Aenean et lectus id libero venenatis varius. Vivamus luctus ligula sit amet faucibus vulputate. Vestibulum tincidunt fringilla mauris,a vulputate magna egestas nec. Vivamus a odio ut nibh viverra fermentum.odo euismod pulvinar,lacus dui fringilla lectus,in tempus mi nulla semper ex. Integer feugiat,lectus a facilisis rutrum,ex magna tincidunt ligula,in suscipit turpis lorem quis neque. Suspendisse dictum,nulla at aliquet cursus,magna tellus mattis purus,nec volutpat mauris nunc non neque. Mauris pretium mauris sed eros interdum lobortis.
      Aenean id vestibulum nisl. Praesent sit amet tempor nulla,consequat viverra ante. Maecenas eu pretium lacus,a consectetur sem. Proin viverra eget turpis eu condimentum. Donec et egestas enim. Maecenas fermentum auctor ligula,nec fringilla mi.
      Quisque hendrerit purus eget urna semper soDales.

原文地址：https://www.jb51.cc/html/426541.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。