弹性方向列弹性容器中弹性项目的高度相同答案

【问题标题】：Same height for flex items in the flex-direction column flex container弹性方向列弹性容器中弹性项目的高度相同
【发布时间】：2018-06-26 13:27:07
【问题描述】：

有没有办法让具有flex-direction: column 的弹性容器中的弹性项目具有相同的高度，仅使用 CSS？

<div style="display: flex; flex-direction: column;">
 <div class="flex-item">
   <!-- other html elements with image, links, button etc. -->
 </div>
 <!-- ... -->
 <div class="flex-item"></div>
</div>

JSFiddle：https://jsfiddle.net/hzxa9v54/

【问题讨论】：

是的。只需使用height。这就是它的用途。
我相信给每个孩子flex: 1;会在使用flex-direction: column;时保持所有身高相等
@TricksfortheWeb 高度值不起作用，因为弹性项目具有不同的内容
@mcmxc 你需要一个脚本来做到这一点。
@Michael_B 由于即使在图像加载后网格似乎也会调整，我建议您将其发布为无脚本答案:)

标签： html css flexbox

【解决方案1】：

你需要一个脚本来使用 Flexbox 解决这个问题，这里使用 jQuery 完成。

Updated fiddle

堆栈sn-p

(function ($) {

  // preload object array to gain performance
  var $items = $('.item')
  
  // run at resize
  $( window ).resize(function() {
    $.fn.setHeight(0);   
  });  

  $.fn.setHeight = function(height) {

    // reset to auto or else we can't check height
    $($items).css({ 'height': 'auto' });
    
    // get highest value
    $($items).each(function(i, obj) {    
      height = Math.max(height, $(obj).outerHeight()) 
    });

    // set the height
    $($items).css({ 'height': height + 'px' });    
  }

  // run at load
  $.fn.setHeight(0);
  
}(jQuery));

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
}
.item {
  border: 1px solid #ddd;
  margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item">
    come content 1
  </div>
  <div class="item">
    come content 2
    come content 3
  </div>
  <div class="item">
    come content 4
    come content 5
    come content 6
  </div>
  <div class="item">
    come content 7
  </div>
</div>

根据评论更新，例如还需要考虑加载图像。

这是脚本的更新版本，可在图像加载后进行调整。

(function ($) {

  // preload object array to gain performance
  var $items = $('.item')
  
  // run at resize
  $( window ).resize(function() {
    $.fn.setHeight(0);   
  });  

  $.fn.setHeight = function(height) {

    // reset to auto or else we can't check height
    $($items).css({ 'height': 'auto' });
    
    // get highest value
    $($items).each(function(i, obj) {    
      height = Math.max(height, $(obj).outerHeight()) 
    });

    // set the height
    $($items).css({ 'height': height + 'px' });    
  }

  function imageLoaded() {
    $.fn.setHeight(0);
  }
  
  var images = $('.item img');
  if (images) {
    images.each(function() {
      if( this.complete ) {
        imageLoaded.call( this );
      } else {
        $(this).one('load', imageLoaded);
      }
    });
  } else {
    // run at load
    $.fn.setHeight(0);
  }

}(jQuery));

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
}
.item {
  border: 1px solid #ddd;
  margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item">
    come content 1
  </div>
  <div class="item">    
    <img src="http://placehold.it/200x100/f00" alt="">
  </div>
  <div class="item">
    come content 4
    come content 5
    come content 6
  </div>
  <div class="item">
    come content 7
  </div>
</div>

【讨论】：

一个问题 - 如果里面有图像，我需要等到它们全部加载完毕。有没有办法做到这一点，而不包括任何库？
@mcmxc 让我知道建议的图像解决方案是否有效，我会将其添加到我的答案中。
感谢伙伴，效果很好。脚本完成所有工作，甚至不需要使用弹性框布局。非常感谢！

【解决方案2】：

更新：使用您的小提琴，我做了一些修改并在 flex 孩子上使用了flex: 1 1 100%;，它似乎正在工作。

更新小提琴：https://jsfiddle.net/hzxa9v54/4/

【讨论】：

这并不完全正确：您还需要为它们提供相同的 flex-basis 和相同的 flex-shrink。还是flex: 1 1 auto; 的快捷方式？
@trichetriche 它实际上是flex: 1 1 0; 的快捷方式，它几乎等同于flex: 1 1 auto;，这意味着 div 没有最小高度（在这种情况下）
@trichetriche 没问题
@trichetriche 和 philr，flex: 1 1 0 远不等同于 flex: 1 1 auto，后者在计算 flex 增长之前考虑了内容
此外，由于父级没有要填充的固定高度，并且内容的大小可能不同，因此无法在没有脚本的情况下完成。