플렉스 랩을 사용하여 고/동일 높이를 고의로 유지하는 방법은 무엇입니까?

Question

제목은 모두 디스플레이 플렉스와 50 % 너비 때문에 내 목록이 2 열로되어 있지만 한 쪽이 길면 다른쪽에 간격이 생기고 그게 내가 제거하려고하는 것입니다.

ul { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    list-style: none; 
 
    margin: 0; 
 
} 
 
li { 
 
    display: block; 
 
    width: 50%; 
 
    margin-bottom: 5px; 
 
}

<ul> 
 
    <li>Some Text Here</li> 
 
    <li>Some Text Here Some Text Here Some Text Here</li> 
 
    <li>Some Text Here</li> 
 
    <li>Some Text Here</li> 
 
    <li>Some Text Here</li> 
 
</ul>

Answer 1

당신은 그들이 모두 기본적으로 높이가 동일하므로 (당신이 테두리를 추가 할 수 있으며 당신이 볼 것)가이 같은 플렉스 사용하여이 작업을 수행 할 수 없습니다.

대신이 같은 열을 사용하는 것이 좋습니다 수 있습니다 플렉스 행 방향 불가능

* { 
 
    box-sizing: border-box; 
 
} 
 

 
ul { 
 
    column-count: 2; 
 
    list-style: none; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    display: block; 
 
    margin-bottom: 5px; 
 
}

<ul> 
 
    <li>Some Text Here</li> 
 
    <li>Some Text Here</li> 
 
    <li>Some Text Here</li> 
 
    <li>Some Text Here Some Text Here Some Text Here</li> 
 
    <li>Some Text Here</li> 
 
</ul>