将元素固定在 flex 容器的底部

Question

我正在使用flexbox创建页面的一部分，其中有2个按钮可以在一个flexbox项目中打开模态框。如果可能的话，我想将按钮固定在该项的底部，就像页脚一样。

我已经创建了一个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>

- MJH

Answer 1

您可以将.one设置为display: flex; flex-direction: column;，将按钮包裹在一个元素中，并在.one上使用justify-content: space-between将按钮推到列的底部。

#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>

- Michael Coker

Answer 2

由于flex属性仅适用于flex容器的子元素，因此您的按钮不是flex项目。

按钮是flex容器（#container）的后代，但不是子元素，因此它们超出了flex布局的范围。

解决该问题的一种方法是使按钮的父元素成为flex容器。然后可以将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布局上下文的更多信息：

• 嵌套flex容器时正确使用flex属性的方法

点击此处了解有关flex auto外边距的更多信息：

• 在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？

- Michael Benjamin

---

谢谢你提供的有用答案和解释。我有一个快速问题，为什么在CSS中将flex添加到p中？这是做什么的？ - MJH

这使得p元素占据了整行的宽度，迫使按钮移到下一行。这就是为什么容器需要使用flex-wrap的原因。 - Michael Benjamin

我试图在不更改HTML的情况下完成它（通常人们希望标记保持不变）。但是，如果您可以调整标记，则该选项是更好的解决方案。 - Michael Benjamin

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

- Belder

---

我猜有人比我更快地完成了这件事！：） - Belder