Question

我有一堆外观较大的盒子，内容和高度经常变化。使用flexbox在每行上给它们相同的高度很容易。我使用Bootstrap网格布局，当每个框在一个较小的屏幕尺寸上垂直堆叠（每行一个）时，我无法让flexbox在它们上设置相同的高度。我希望我可以通过flow-direction将column更改为row来解决问题，但不会。

有没有办法在不使用javascript hack的情况下解决这个问题？

相关父容器css：

display: flex;
flex-direction: row;
flex-flow: row wrap;

子链接（flex）框：

display: flex;

伪代码：

<div class="flex-container>
   <a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
     <h2>Test2</h2>
     <div><img src="/ds" alt="Hi" /></div>
     <div>sadsafmf sløfmkls</div>
   </a>
   <a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
     <h2>Test3</h2>
     <div><img src="/ds" alt="Hi" /></div>
     <div>sadsafmf sløfmkls skldfsd ffsf sdflsdf f sl as ad sad</div>
   </a>
</div>

Answer 1

否......相等的高度仅适用于同一行...所以当元素换行时，它们不再达到相同的高度。如果flex-direction是列，则它可以工作，只要有足够的垂直空间使两个元素具有相同的高度（2 *最大）。如果没有，容器不会伸展以容纳相同大小的两个div。

＆＃13;

.container {
  margin-bottom:10px;
  }

.col-sm-6 {
  border:1px solid grey;
  flex:1;
}
.fixed {
  height: 250px;
}
.flex-container {
  display: flex;
  flex-direction: column;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row fixed flex-container">
        <a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
       <h2>Same Height</h2>
       <div>sadsafmf sløfmkls</div>
     </a>
        <a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
       <h2>Same Height</h2>
       <div>sadsafmf sløfmkls skldfsd ffsf sdflsdf f sl as ad sad</div>
     </a>
  </div>
</div>

<div class="container">
  <div class="row flex-container">
        <a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
        <h2>Shorter</h2>
       <div>sadsafmf sløfmkls</div>
     </a>
        <a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
       <h2>Taller</h2>
       <div>sadsafmf sløfmkls skldfsd ffsf sdflsdf f sl as ad sad</div>
     </a>
  </div>
</div>

＆＃13;

Answer 2

只需将align-self:stretch添加到框元素即可。此外，height: 100%对孩子也有效。

Flexbox在垂直堆叠的盒子上保持相同的高度

2 个答案: