如何使flex子高度包装内容

我基本上想要的是使每个子元素的高度包装其内容.

这是我的代码:

    
child1
    
child2
    
child3
    
child1

输出:

预期产量:

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

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

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

  
child1
  
child2
  
child3
  
child1