flexbox列中的高度部分相等嗎？

Question

我使用flexbox列進行基本的布局。 下面有標題，圖像和列表。 列表必須有邊框，並且內容可以不同。 可以在沒有JavaScript的情況下使列表部分的高度相等嗎？ 還是需要用JS計算最大截面高度並將其應用於其他人？

這就是我要的：

這就是我所擁有的：

 .columns { display: flex; } .col { margin-left: 20px; } ul { margin: 0; } .list { padding: 24px; border: 1px solid blue; } 

 <div class="columns"> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> </ul> </div> </div> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div> </div> </div> 

Answer 1

因為兩列都在同一個flex容器內，所以可以，僅使用CSS即可將列表框設置為相同的高度（基於最高的內容）。

 .columns { display: flex; } .col { display: flex; /* new */ flex-direction: column; /* new */ margin-left: 20px; } .list { flex: 1; /* new */ padding: 24px; border: 1px solid blue; } ul { margin: 0; } 

 <div class="columns"> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> </ul> </div> </div> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div> </div> </div> 

以下是一些示例：

jsFiddle演示

 .columns { display: flex; } .col { display: flex; /* new */ flex-direction: column; /* new */ margin-left: 20px; } .list { flex: 1; /* new */ padding: 24px; border: 1px solid blue; } ul { margin: 0; } 

 <div class="columns"> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> </ul> </div> </div> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div> </div> </div> <br> <div class="columns"> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> </ul> </div> </div> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div> </div> </div> <br> <div class="columns"> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div> </div> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> </ul> </div> </div> </div> 

Answer 2

您也應該將.col設置為flex

.col{ display:flex; }

並且您的班級列更好地命名為行