如何使flex子高度包装内容[重复]答案

【问题标题】：How to make flex child height to wrap content [duplicate]如何使flex子高度包装内容[重复]
【发布时间】：2017-12-31 08:53:57
【问题描述】：

我基本上想要的是让每个子元素的高度来包装它的内容。

这是我的代码：

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

输出：

预期输出：

【问题讨论】：

align-content:flex-start 帮我重置了默认的stretch。

标签： html css flexbox

【解决方案1】：

您只需在父元素上设置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>

【讨论】：