如何防止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>

希望這有助於。