代码之家 › 专栏 › 技术社区 › dsharew

如何使flex child height包装内容[重复]

flexbox css html

dsharew · 技术社区 · 7 年前

<style>

.parent{
        display: flex;
    }

.child{

    padding: 5px;
    margin: 10px;
    background: green;
    height: auto;
}   

</style>

<div class="parent">

    <div class="child">child1</div>
    <div class="child">child2</div>
    <div class="child">child3</div>
    <div class="child" style="height:50px">child1</div>

</div>

输出:

预期输出:

1 回复 | 直到 7 年前

Nenad Vracar 7 年前

你只需要设置 align-items: flex-start 在父元素上,因为默认值为 stretch

.parent {
  display: flex;
  align-items: flex-start;
}

.child {
  padding: 5px;
  margin: 10px;
  background: green;
  height: auto;
}

<div class="parent">
  <div class="child">child1</div>
  <div class="child">child2</div>
  <div class="child">child3</div>
  <div class="child" style="height:50px">child1</div>
</div>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前