代码之家 › 专栏 › 技术社区 › Joel Hoelting

使flexbox行成为最短子元素的高度?

flexbox css3 css html

Joel Hoelting · 技术社区 · 6 年前

我使用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元素的高度扩展到最高的子元素:

行{
显示:Flex;
宽度:100%;
背景:橙色;
}

<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"> 最短子元素的高度?

2 回复 | 直到 6 年前

Michael Benjamin William Falcon 6 年前

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

这不是flexbox可以自动执行的操作。

您需要找到一种方法来告诉容器,最短的子容器的高度是多少,以便它可以调整其高度以匹配。Javascript似乎是前进的道路。

以两幅图像为例,一幅高度为200px,另一幅高度为120px。以下示例在以下情况下按预期工作: <img> 元素是flex元素的直接子元素。

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

实际上,这一行高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>

Hooman Bahreini 6 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前