flex容器中flex项目的高度如何相同（flex-direction为column）。

Question

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

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

- mcmxc

---

是的，只需使用 height。那就是它的作用。 - yaakov

@mcmxc 你需要一个脚本来完成这个任务。 - Asons

@philr 如果您在父容器上设置了高度，那么该编辑/更新才会生效，但是 OP 没有/不想设置。 - Asons

@Michael_B 由于Grid似乎会在图像加载后进行调整，我建议您将其发布为一个无脚本答案 :) - Asons

@LGSon，如果OP愿意采用网格解决方案，那么问题应该被修改，我会发布我的答案。谢谢。 - Michael Benjamin

Answer 1

您需要一个脚本来使用Flexbox解决这个问题，这里使用了jQuery实现。

更新的JSFiddle链接

代码片段：

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

- Asons

---

一个问题 - 如果有图片在里面，我需要等待它们全部加载完毕.. 有没有办法做到这一点，而不包括任何库？ - mcmxc

@mcmxc 如果建议的图片解决方案可行，请告诉我，我会将其添加到我的答案中。 - Asons

谢谢，伙计。非常好用。脚本完成了所有工作，甚至不需要使用 flex box 布局。非常感谢！ - mcmxc

Answer 2

更新：使用您的代码片段，我进行了轻微修改并在 flex 子元素上使用了 flex: 1 1 100%;，看起来它正在工作。

更新后的代码片段：https://jsfiddle.net/hzxa9v54/4/

- philr

---

这并不完全正确：您还需要为它们提供相同的 flex-basis 和相同的 flex-shrink。或者这是 flex: 1 1 auto; 的快捷方式吗？ - user4676340

@trichetriche 实际上是 flex: 1 1 0; 的快捷方式，这与 flex: 1 1 auto; 几乎等效，意味着该 div 没有最小高度（在此情况下）。 - philr

@trichetriche 没问题 - philr

@trichetriche和philr，flex: 1 1 0远非等同于flex: 1 1 auto，在后者中，内容在计算flex增长之前被考虑。 - Asons

此外，由于父元素没有设置高度来填充，并且内容可能大小不同，因此无法在没有脚本的情况下完成。 - Asons