将柔性盒收缩到最短框的相同高度 [英] shrinking flexboxes to the same height of the shortest box

问题描述

我目前有一个flexbox布局，看起来像这样：

蓝色是class =wrap，橙色和全部三个黄色框包含在两个单独的class =wrap_col中，每个黄色框包含在class =wrap_item中。

  .wrap {
 display：flex; 
 flex-flow：换行; 
 margin：0 auto; 
} 
 
 .wrap_col {
 display：flex; 
 flex-direction：column; 
 flex：1 0 auto; 
} 
 
 .wrap_item {
 margin：10px; 
 display：flex; 
 flex：1 0 auto; 
 flex-direction：column; 
 
 $ / code> 

如何缩小三个黄色框的高度，橙箱高度相同吗？你可以缩小柔性盒的高度作为最短的盒子吗？

解决方案

一个简单的方法来实现这一点将是确保您的列的高度与 .wrap-col class是一样的（要么设置一个固定的高度，要么设置 height：100％并且让它们都填充 .wrap 元素）。然后确保为所有弹性项目设置 flex-shrink：1 。

  .wrap_item {
 margin：10px; 
 display：flex; 
 flex：1 1 auto; 
 flex-direction：column; 
 
  

这是 jsfiddle 。尝试更改 .wrap 元素的高度，您可以看到调整大小的框以适合。

I currently have a flexbox layout that looks like this:

The blue is class = "wrap", the orange and all three yellow boxes are contained in two separate class = "wrap_col", and each yellow box is contained in class = "wrap_item".

.wrap {
  display: flex;
  flex-flow: row wrap;
    margin: 0 auto;
}

.wrap_col {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.wrap_item {
  margin:10px;
  display: flex;
  flex:1 0 auto;
  flex-direction: column; 
}

How can I shrink the three yellow boxes' heights down so that it is the same height as the orange box? Can you shrink flexboxes down to the same height as the shortest box?

解决方案

An easy way to achieve this would be to make sure that the height of both your columns with the .wrap-col class is this same (either set a fixed height or set height: 100% and have them both fill the space of the .wrap element). Then make sure flex-shrink: 1 is set for all flex items to.

.wrap_item {
  margin:10px;
  display: flex;
  flex:1 1 auto;
  flex-direction: column; 
}

Here is a jsfiddle. Try changing the height of the .wrap element and you can see the boxes resizing to fit.

这篇关于将柔性盒收缩到最短框的相同高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！