Chrome 中等高的 Flexbox 列

Question

我有一个简单的 2 列布局，我想使用 Flexbox 来获得相等的高度：

HTML

<div class="row flex">
    <!-- menu -->
    <div class="col-xs-4">
        <aside>
            Menu goes here
        </aside>    
    </div>
    <!-- content -->
    <div class="col-xs-8">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac elementum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus nec elementum erat. Suspendisse 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.</p>
    </div>
</div>

CSS

body { color: red; }
.flex { display: flex; }
aside { background: #000; height: 100%; }

这在 Firefox 中有效，但在 Chrome 中无效：here's a Fiddle

我尝试了一些东西（包括供应商前缀），但它仍然不起作用。

Answer 1

使用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. 左侧的 1px 间隙已被 div.flex.row:before, div.flex.row:after { display: none } 移除

相关回答：Remove 1px gap when using display:flex in Chrome

---

我已经为这个例子剥离了所有不必要的类。目前，两个柱高都由最高的柱确定。您还可以在 flex 容器上使用 height: 100vh 填充页面的整个高度 — read more about viewport units here.

视口单位兼容性： Viewport Units are almost well supported。

要给列更大的宽度，给它更大的 flex 值。我已将本例中的第二列更改为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;
}

<div class="flex">
  <!-- menu -->
  <div class="column">
    <aside>
      Menu goes here
    </aside>
  </div>
  <!-- content -->
  <div class="column">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac elementum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus nec elementum erat. Suspendisse 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.</p>
    <p>Nulla facilisi. Pellentesque nec libero leo. Duis porta ut neque vulputate blandit. In vel quam eu eros finibus feugiat ut in nulla. Morbi congue, tellus commodo 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.</p>

  </div>
</div>

Answer 2

这是我使用一点 Modernizr 和 jQuery 的解决方案（使用 Equalize plugin）

http://jsfiddle.net/0Leymgbe/1/

这就是它起作用的原因：

if ($().equalize) { // check if plugin is loaded
    $(window).on("resize", function () {
        (Modernizr.mq("(min-width: 768px)")) // if it's tablet or desktop...
        ? $('.row').equalize({reset: true}) // then equalize the columns
        : $('.row > div').css({'height': 'auto'}); //else reset to original height
    }).resize(); // trigger the resize on page load, too
}

在窗口调整大小（和加载）时 Modernizr 检查视口是否大于 768px（平板电脑和台式机）：如果为真，则 jQuery 均衡列；如果为 false（智能手机），则恢复原始高度

（对我来说）没有办法让它简单地与 CSS3 flexbox 一起工作