等高欄和對齊最後一項到底

Question

我有一個列表，其中每個li具有嵌套的容器。我嘗試爲所有列表項保留相同的高度，並將最後一個div推到最下面。我將如何使用flex來做到這一點？

ul.list-container { 
 
    display: inline-flex; 
 
    justify-content: space-between; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
ul.list-container > li { 
 
    flex-grow: 1; 
 
    min-width: 200px; 
 
    background-color: #e3e3e3; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
ul.list-container > li > .pus-me-to-the-bottom { 
 
    
 
    color: red; 
 
    margin-top: 10px; 
 

 
    // this should expand to the bottom 
 
}

<ul class="list-container"> 
 
    <li> 
 
    <div class="title">title</div> 
 
    <div class="pus-me-to-the-bottom">title</div> 
 
    </li> 
 

 
    <li> 
 
    <div class="title"> 
 
Audiam inciderint intellegebat ne est, cu pri quidam deseruisse persequeris, consetetur elaboraret duo at. Sed quod veniam disputando in. An nam ferri tollit, ea quod doming facete nam. Eum omittam periculis te, ad pri viris tempor.</div> 
 
    <div class="pus-me-to-the-bottom">title</div> 
 
    </li> 
 
    
 
    <li> 
 
    <div class="title">title</div> 
 
    <div class="pus-me-to-the-bottom">title</div> 
 
    </li> 
 
    
 
    <li> 
 
    <div class="title">title</div> 
 
    <div class="pus-me-to-the-bottom">title</div> 
 
    </li> 
 

 
</ul>

，這裏是一個codepen所有我試圖

Answer 1

ul.list-container { 
 
    display: inline-flex; 
 
    justify-content: space-between; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 
ul.list-container > li { 
 
    display: flex;    /* new; nested flex container */ 
 
    flex-direction: column; /* new; stack flex items vertically */ 
 
    flex-grow: 1; 
 
    min-width: 200px; 
 
    background-color: #e3e3e3; 
 
    /* height: 100%;   <-- remove to enable equal height columns; see reference #1 */ 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 
ul.list-container > li > .pus-me-to-the-bottom { 
 
    margin-top: auto;   /* new; see reference #2 */ 
 
    color: red; 
 
    /* margin-top: 10px;  <-- remove */ 
 
    border: 1px solid black; 
 
}

<ul class="list-container"> 
 
    <li> 
 
    <div class="title">title</div> 
 
    <div class="pus-me-to-the-bottom">title</div> 
 
    </li> 
 
    <li> 
 
    <div class="title"> 
 
     Audiam inciderint intellegebat ne est, cu pri quidam deseruisse persequeris, consetetur elaboraret duo at. Sed quod veniam disputando in. An nam ferri tollit, ea quod doming facete nam. Eum omittam periculis te, ad pri viris tempor.</div> 
 
    <div class="pus-me-to-the-bottom">title</div> 
 
    </li> 
 
    <li> 
 
    <div class="title">title</div> 
 
    <div class="pus-me-to-the-bottom">title</div> 
 
    </li> 
 
    <li> 
 
    <div class="title">title</div> 
 
    <div class="pus-me-to-the-bottom">title</div> 
 
    </li> 
 
</ul>

參考文獻：

個
1. Equal Height Columns with Flexbox
2. Methods for Aligning Flex Items