Question

是否有办法让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>

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

Answer 1

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

Updated fiddle

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

更新：使用你的小提琴，我做了一些修改，并在flex儿童身上使用flex: 1 1 100%;，它似乎正在运作。

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

Answer 3

给它们相同的弹性基础，相同的生长和收缩属性，它们应该具有相同的高度：

.container {
  display: flex;
  flex-direction: column;
  height: 500px;
}

.container .flex-item {
  flex: 1 1 auto;
  padding: 24px;
  width: 200px;
  margin: 12px;
  background: lightgrey;
}

<div class="container">
 <div class="flex-item"></div>
 <div class="flex-item"></div>
 <div class="flex-item"></div>
 <div class="flex-item"></div>
</div>

flex-direction列flex容器中flex项目的高度相同

3 个答案: