如何使一个 flexbox 行的高度等于子元素中最短的元素高度？

Question

我在使用Flexbox时遇到了一些困难。目标是有一行，它的高度与最短的子元素高度相同。拿两个图片作为例子，一个高度为200像素，另一个高度为120像素。当 <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"> 的高度等于最短的子元素?

- Joel Hoelting

---

可能这会有所帮助 https://dev59.com/flUM5IYBdhLWcg3wYvTl? - Temani Afif

Answer 1

正如@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>

- Hooman Bahreini

---

感谢您的答案，并花时间提供JavaScript解决方案。 - Joel Hoelting

Answer 2

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

下面是使用: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>

- Adrian Bienias

Answer 3

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

这不是 flexbox 自动完成的事情。

您需要找到一种方法告诉容器最短子元素的高度，以便它可以调整其高度以匹配。JavaScript 似乎是可行的方式。

---

取两张图片作为例子，一张高度为200像素，另一张高度为120像素。当 <img> 元素是 flex 元素的直接子元素时，下面的示例可以正常工作。 "下面的示例可以正常工作..." 我猜你的意思是行的高度是较短图片的高度（120像素）。

事实上，该行的高度为200像素：

较短的图像实际上从120px拉伸到200px，因为flex容器的默认设置是align-items: stretch，这意味着flex项将展开交叉轴的整个长度。（这就是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>

- Michael Benjamin

---

谢谢解答。今天我学到了align-items：stretch是Flexbox的默认规则。我以前不知道这个。你说得对，我确实认为行的高度是较短图像的高度。非常有启发性，谢谢！ - Joel Hoelting