將最后一個div與flexbox的底部對齊

Question

場景：

• 我正在創建一個定價比較表，並且很難將最后一個div card-vat-fee對准容器的底部。
• 我需要執行此操作，因為這些層的運行列表彼此之間的長度更長，導致最后一個div與容器的底部不對齊。
• 如何獲取最后一個div以使其與flexbox的底部對齊？

嘗試案例：

• 當然，如果我將min-height: 320px;設置為min-height: 320px; 在card-vat-fee類上，它將div對齊到底部， 但這不是一種響應式解決方案 ，我覺得有一種使用flex屬性的更好的方法。 此外，將card-vat-fee div設置為flex-grow， flex: 1 1 auto ，產生不理想的解決方案 。

代碼：

<div class='pricing__tier'>
 <div class='uni-card-header'>
 </div>
 <div class='uni-card-body'>
   <div class='uni-row-on'>
   </div>
   <div class='uni-row-off'>
   </div>
   <div class='uni-row-on card-vat-fee'>
    <div class='vat-fee-text'>
     Credit card fees and VAT apply. See below for details.
    </div>
   </div>
 </div>
</div>
<style>
    .pricing__tier {
        padding: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        width: 0%;
        flex: 1;
    }
    .uni-card-body {
        display: flex;
        flex-direction: column;
    }
</style>

定價層

請提出建議。
提前致謝

Answer 1

在最后一個div上使用margin-top:auto 。

 .pricing__tier { padding: 0; text-align: center; display: flex; flex-direction: column; width: 25%; flex: 1; height: 200px; /* for demo purposes */ border: 1px solid grey; } .uni-card-body { display: flex; flex-direction: column; flex: 1; } .card-vat-fee { margin-top: auto; /* push to bottom */ background: green; } 

 <div class='pricing__tier'> <div class='uni-card-header'> </div> <div class='uni-card-body'> <div class='uni-row-on'> </div> <div class='uni-row-off'> </div> <div class='uni-row-on card-vat-fee'> <div class='vat-fee-text'> Credit card fees and VAT apply. See below for details. </div> </div> </div> </div> 

Answer 2

1-設置父div相對位置而沒有top＆left＆right＆bottom屬性

2-設置最后一個div位置的絕對位置為bottom：0; right：0; left：0; height：36px;

<style>
  .pricing__tier {
    position:relative;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 0%;
    flex: 1;
  }
  .pricing__tier>.vat-fee-text {
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    height:36px;
  }
 </style>

Answer 3

plaesa試試這個：

.uni-card-body {
        display: flex;
        flex-direction: column;
        width: 'for example' 700px;
    }
    .uni-row-on.card-vat-fee{
    align-self: flex-end;
}

我希望這能幫到您！

Answer 4

 .uni-card-body { display: flex; flex-flow: row wrap; justify-content: center; background: yellow; height: 90vh; } .uni-row-on.card-vat-fee { align-self: flex-end; background: green; } 

 <div class='pricing__tier'> <div class='uni-card-header'> </div> <div class='uni-card-body'> <div class='uni-row-on'> </div> <div class='uni-row-off'> </div> <div class='uni-row-on card-vat-fee'> <div class='vat-fee-text'> Credit card fees and VAT apply. See below for details. </div> </div> </div> </div> 

我已經在代碼段中說明了這一點，它將有所幫助。

注意：內容說明，背景和高度僅用於演示，並非必需。