html - 将元素固定到 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>

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>