伸缩方向列伸缩容器中伸缩项目的高度相同 [英] Same height for flex items in the flex-direction column flex container

问题描述

是否可以仅使用CSS在具有flex-direction: column的flex容器中使flex项具有相同的高度?

Is there a way to have flex items within a flex container with flex-direction: column have the same height, using CSS only?

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

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

推荐答案

您将需要一个脚本来使用Flexbox解决此问题，此处使用jQuery完成.

You will need a script to solve that using Flexbox, here done using jQuery.

更新了小提琴

堆栈片段

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

根据评论进行更新，例如还需要考虑加载图片.

Update based on a comment, where e.g. also loading images needs to be taken into account.

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

Here is an updated version of the script, that adjust after image loads.

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

这篇关于伸缩方向列伸缩容器中伸缩项目的高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！