html – 使flexbox行成为最短子元素的高度？

概述我在使用Flexbox时遇到了一些困难.目标是使一行与最短的子元素具有相同的高度.以两幅图像为例,一幅高度为200px,另一幅高度为120px.以下示例在< img>时按预期工作.元素是flex元素的直接子元素. .row { display: flex; width: 100%; background: orange;} <div class="row"> <img src= 我在使用FlexBox时遇到了一些困难.目标是使一行与最短的子元素具有相同的高度.以两幅图像为例,一幅高度为200px,另一幅高度为120px.以下示例在< img>时按预期工作.元素是flex元素的直接子元素.

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

<div >   <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 >  <div >    <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />  </div>  <div >    <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />  </div></div>

什么是使< div class =“row”>的解决方案最短子元素的高度？

解决方法

The goal is to have a row that is the same height as the shortest child element.

这不是flexBox可以自动执行的 *** 作.

您需要找到一种方法告诉容器最短孩子的高度是多少,以便调整其高度以匹配. JavaScript似乎还有很长的路要走.

Take two images as examples,one has 200px height the other has 120px height. This example below works as intended when <img> elements are the direct children of the flex element.

“下面的示例按预期工作……”我认为你的意思是行的高度是较短图像的高度(120px).

事实上,这行是200px高：

较短的图像实际上从120px拉伸到200px,因为Flex容器上的默认设置是align-items：stretch,这意味着flex项目将扩展横轴的整个长度. (这就是flexBox如何提供具有相同高度列的布局.)

如果你覆盖默认值,比方说,对齐项目：flex-start,你会清楚地看到较高的项目设置了容器的高度.

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

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

总结

以上是内存溢出为你收集整理的html – 使flexbox行成为最短子元素的高度？全部内容，希望文章能够帮你解决html – 使flexbox行成为最短子元素的高度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。