フレックスの子の高さをコンテンツをラップする方法

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

デフォルト値はstretchあるので、あなただけの親要素にalign-items: flex-startを設定する必要があります。

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