Chrome中等高的Flexbox列

一尘不染

Chrome中等高的Flexbox列

css

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

我尝试了一些方法（包括供应商前缀），但仍然无法正常工作。

阅读 240

2020-05-16

共1个答案

一尘不染

要使用Flexbox创建两个相等的列：

父容器得到 display: flex
每列都是由div创建的，它们可以flex: 1增长/收缩

拉伸第一列的子级：

还提供了第一列，display: flex以便其子元素具有柔韧性并可以成长
旁边的孩子被给予flex: 1并会成长/收缩

这是您可能需要的最简单的Flexbox指南。

Flexbox兼容性： IE11 +和所有现代浏览器。

例

使用Bootstrap
：这是您的评论中的小提琴，添加了我的更改。左侧的1px间距已被删除div.flex.row:before, div.flex.row:after { display: none }

相关答案：在Chrome中使用display：flex时，请消除1px的间隙

在此示例中，我删除了所有不必要的类。当前，两个列的高度都由最高的列确定。您还可以在height: 100vhflex容器中将列填充到页面的整个高度中-
在此处了解有关视口单位的更多信息。

视口单位兼容性： 几乎
完全支持视口单位
__。

要为列提供更大的宽度，请为它提供更大的弯曲值。我将本例中的第二列更改为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>

2020-05-16