如何使柔性子高度包裝內容

Question

我基本上想要的是使每個子元素的高度來包裝其內容。

這裏是我的代碼：

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

輸出：

預期輸出：

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