Flexbox在垂直堆叠的盒子上保持相等的高度[重复]

Posted 2023-03-07

【中文标题】Flexbox在垂直堆叠的盒子上保持相等的高度[重复]

【英文标题】：Flexbox keep equal height on vertically stacked boxes [duplicate]

【发布时间】：2016-07-26 18:13:06

【问题描述】：

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

有什么方法可以在不使用 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"  /></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"  /></div>
     <div>sadsafmf sløfmkls skldfsd ffsf sdflsdf f sl as ad sad</div>
   </a>
</div>

【参考方案1】：

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

.container 
  margin-bottom:10px;
  

.col-sm-6 
  border:1px solid grey;
  flex:1;

.fixed 
  height: 250px;

.flex-container 
  display: flex;
  flex-direction: column;

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

【参考方案2】：

只需将align-self:stretch 添加到框元素即可。 孩子上的height: 100% 也可以工作。