将flexbox行设置为最短子元素的高度？

Question

我在使用Flexbox时遇到了一些困难。目的是使行与最短的子元素具有相同的高度。以两个图像为例，一个图像高度为200px，另一个图像高度为120px。当<img>元素是flex元素的直接子代时，下面的示例可以正常工作。

.row {
  display: flex;
  width: 100%;
  background: orange;
}

<div class="row">
   <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
   <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>

但是，在以下示例中，flexbox元素的高度扩展为最高的子元素：

.row {
  display: flex;
  width: 100%;
  background: orange;
}

<div class="row">
  <div class="col">
    <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
  </div>
  <div class="col">
    <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
  </div>
</div>

如何使<div class="row">成为最短子元素的高度？

Answer 1

  

目标是使行与最短的子元素具有相同的高度。

flexbox无法自动执行此操作。

您需要找到一种方法来告诉容器最矮的孩子的身高是多少，以便它可以调整其高度以匹配。 JavaScript似乎是要走的路。

---

  

以两个图像为例，一个图像高度为200px，另一个图像高度为120px。当<img>元素是flex元素的直接子代时，下面的示例可以正常工作。

“下面的示例按预期工作...” 我想您是指行的高度是较短图像的高度（120像素）。

实际上，该行的高度为200px：

较短的图像实际上是从120像素扩展到200像素，因为伸缩容器的默认设置为align-items: stretch，这意味着伸缩项目将扩展横轴的整个长度。 （这是flexbox如何提供具有相等高度的列的布局。）

如果您用align-items: flex-start覆盖默认值，则会清楚地看到较高的物品会设置容器的高度。

.row {
  display: flex;
  align-items: flex-start;  /* new */
  background: orange;
}

<div class="row">
  <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
  <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>

Answer 2

如@Michael_B所指出的，由于align-items: stretch，第一个示例仅显示正确。

您不能使用flex或纯CSS做到这一点。如果我们有一个CSS选择器可以选择最短的兄弟姐妹，那么我们可以做到这一点-但是我们没有！

您可以为父级使用固定高度：

.row {
  display: flex;
  width: 100%;
  height: 120px; /* fixed height */
  background-color: orange;
}

<div class="row">
   <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
   <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>

或使用JavaScript为您做逻辑：

$( document ).ready(function() {
    var min_height = -1;  
    
    $("img").each(function(  ) {
        if ($(this).height() < min_height || min_height == -1) {
            min_height = $(this).height();
        }
        $('.row').height(min_height);
    })
    
    $("img").each(function(  ) {
        $(this).height(min_height);
    });
});

.row {
  display: flex;
  width: 100%;
  background-color: orange;
  align-items: flex-start
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
   <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
   <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>

Answer 3

您可以调整其他列的高度以匹配您选择的列（例如最短的列），方法是将其他列相对于列包装器进行绝对定位。

您可以在下面找到带有 :not() 的解决方案，以便更轻松地通过类名指示您要选择哪一列作为列高参考
https://developer.mozilla.org/en-US/docs/Web/CSS/:not

不需要 JavaScript！

.row {
  display: flex;
  background: orange;
}

img {
  vertical-align: top; /* to get rid of default bottom padding in images */
}

.row > div:not(.dynamic-max-height-column) {
  position: relative;
}

.row > div:not(.dynamic-max-height-column) > img {
  position: absolute;
  max-height: 100%;
}

<div class="row">
  <div class="dynamic-max-height-column">
    <img src="https://dummyimage.com/300x200/575757/ffffff" alt="">
  </div>
  <div>
    <img src="https://dummyimage.com/300x300/b3b3b3/ffffff" alt="" />
  </div>
</div>