使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

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

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

这不是 Flexbox 可以自动完成的事情。

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

以两张图片为例，一张的高度为 200px，另一张的高度为 120px。<img>当元素是 flex 元素的直接子元素时，下面的示例将按预期工作。

“下面的示例按预期工作......”我认为您的意思是行的高度是较短图像的高度（120px）。

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

较短的图像实际上从 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>