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

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; 
}