如何防止flexbox与其旁边的flexbox高度相等？

Question

我有大型柔性容器。里面有两个柔性容器。在那些列表项中有几行。问题是具有较少项目的项目被拉伸以匹配另一项目的高度，因此元素之间的空间太大。

Answer 1

您需要将align-self: flex-start;添加到柔性盒内部。这排除了默认值align-self: stretch;

下面是一个例子：

#outsideFlexBox { 
 
    display: flex; 
 
} 
 

 
.insideFlexBox { 
 
    display: flex; 
 
    align-self: flex-start; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background-color: #33FFCC; 
 
}

<div id="outsideFlexBox"> 
 
    <div class="insideFlexBox"> 
 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
     <li>Item 5</li> 
 
    </ul> 
 
    </div> 
 
    <div class="insideFlexBox"> 
 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
    </ul> 
 
    </div> 
 
</div>

希望这有助于。