将元素固定到flex容器的底部 [英] fix elements to the bottom of a flex container
问题描述
我正在使用flexbox创建页面的一部分,我有2个按钮可以在其中一个flexbox项目中打开模式.如果可能的话,我想将按钮固定在项目底部.
I am using flexbox to create part of a page and I have 2 buttons that will open modals in one of the flexbox items. I would like to fix the buttons to the bottom of the item like a footer if possible.
我创建了 CodePen 来演示该问题.我尝试了几种解决方案,但似乎无法使按钮在底部对齐.我对HTML和CSS相对较新,因此很可能错过了一些琐碎的事情.
I have created a CodePen to demo the issue. I have tried several solutions but I can't seem to get the buttons aligned at the bottom. I am relatively new to HTML and CSS so it's very possible that I've missed something trivial.
#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>
推荐答案
您可以制作.one
display: flex; flex-direction: column;
,将按钮包装在元素中,并使用.one
上的justify-content: space-between
将按钮推到底部列的
You can make .one
display: flex; flex-direction: column;
, wrap the buttons in an element, and use justify-content: space-between
on .one
to push the buttons to the bottom of the column.
#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>
这篇关于将元素固定到flex容器的底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!