將元素固定到柔性容器的底部

Question

我使用flexbox創建頁面的一部分，並且我有2個按鈕可以在其中一個柔性箱項目中打開模塊。如果可能，我想將按鈕固定到項目的底部。

我創建了一個CodePen來演示此問題。我已經嘗試了幾種解決方案，但我似乎無法獲得底部對齊的按鈕。我對HTML和CSS比較陌生，所以很可能我錯過了一些微不足道的東西。

#container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    align-content: center; 
 
    margin-top: 20px; 
 
} 
 

 
.one { 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
    width: 450px; 
 
    flex-grow: 1; 
 
    height: 600px; 
 
} 
 

 
.two { 
 
    background-color: grey; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
    flex-grow: 1.2; 
 
    width: 524px; 
 
    height: 600px; 
 
} 
 

 
button { 
 
    background-color: green; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
}

<div id="container"> 
 
    <div class="one"> 
 
    <p> I would like to align the buttons to the bottom of this item </p> 
 
    <button id="Btn1">Open Modal 1</button> 
 
    <button id="Btn2">Open Modal 2</button> 
 
    </div> 
 
    <div class="two"> 
 
    <p> No buttons for this item </p> 
 
    </div>

Answer 1

您可以.onedisplay: flex; flex-direction: column;，包裹在一個元素的按鈕，使用justify-content: space-between上.one的按鈕推到塔的底部。

#container{ 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    align-content: center; 
 
    margin-top: 20px; 
 
} 
 

 
.one{ 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
    width: 450px; 
 
    flex-grow: 1; 
 
    height: 600px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 

 

 
.two{ 
 
    background-color: grey; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
    flex-grow: 1.2; 
 
    width: 524px; 
 
    height: 600px; 
 
} 
 

 
button { 
 
    background-color: green; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
}

<div id="container"> 
 
     <div class="one"> 
 
     <p> I would like to align the buttons to the bottom of this item </p> 
 
     <div class="buttons"> 
 
     <button id="Btn1">Open Modal 1</button> 
 
     <button id="Btn2">Open Modal 2</button> 
 
     </div> 
 
     </div> 
 
     <div class="two"> 
 
     <p> No buttons for this item </p> 
 
    </div>

Answer 2

由於Flex屬性只適用於柔性容器的孩子，你的按鈕都沒有彎曲的物品。

的按鈕後裔柔性容器（#container）的，但不孩子，所以它們超出柔性佈局的範圍。

解決此問題的一種方法是將按鈕的父級設置爲柔性容器。然後flex屬性可以應用於按鈕。

#container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    align-content: center; 
 
    margin-top: 20px; 
 
} 
 

 
.one { 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
    width: 450px; 
 
    flex-grow: 1; 
 
    height: 600px; 
 
    display: flex;   /* new */ 
 
    flex-wrap: wrap;   /* new */ 
 
} 
 

 
p { 
 
    flex: 0 0 100%;   /* new */ 
 
} 
 

 
button { 
 
    margin: auto 10px 0;  /* new */ 
 
    background-color: green; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
} 
 

 
.two { 
 
    background-color: grey; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
    flex-grow: 1.2; 
 
    width: 524px; 
 
    height: 600px; 
 
}

<div id="container"> 
 
    <div class="one"> 
 
    <p> I would like to align the buttons to the bottom of this item </p> 
 
    <button id="Btn1">Open Modal 1</button> 
 
    <button id="Btn2">Open Modal 2</button> 
 
    </div> 
 
    <div class="two"> 
 
    <p> No buttons for this item </p> 
 
    </div>

瞭解更多有關Flex格式化的內容在這裏：

• Proper use of flex properties when nesting flex containers

瞭解更多關於Flex auto利潤率在這裏：

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 3

一種方法是把你的按鈕在自己<div>像這樣：

<div id="container"> 
    <div class="one"> 
    <p> I would like to align the buttons to the bottom of this item </p> 
     <div class="btn-container"> 
     <button id="Btn1">Open Modal 1</button> 
     <button id="Btn2">Open Modal 2</button> 
     </div> 
    </div> 
    <div class="two"> 
<p> No buttons for this item </p> 
</div> 

，改變你的CSS來：

#container{ 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    align-items: center; 
    align-content: center; 
    margin-top: 20px; 
} 

.one { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    justify-content: space-between; 
    height: 100vh; 
    background-color: black; 
    color: white; 
    font-size: 30px; 
    padding: 10px; 
    width: 450px; 
    height: 600px; 
} 

.two { 
    background-color: grey; 
    color: white; 
    font-size: 30px; 
    padding: 10px; 
    flex-grow: 1.2; 
    width: 524px; 
    height: 600px; 
} 

.btn-container { 
    justify-content: flex-end; 
    display: flex; 
    } 

button { 
    margin: 10px; 
    background-color: green; 
    border: none; 
    color: white; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
}