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

Question

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/

Answer 1

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

Updated fiddle

Stack snippet

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

Answer 2

UPDATED: using your fiddle, i made slight modifications and used flex: 1 1 100%; on the flex children and it appears to be working.

updated fiddle: https://jsfiddle.net/hzxa9v54/4/