html - 使 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>