html - 将元素( flex 元素)固定到容器底部

Question

我有一个容器是整个窗口的高度/宽度。在这个容器内，我想要一个垂直和水平居中的表单。下面，我还想在容器的底部基线上复制一份。类似于下面的糟糕插图。现在我只能让它们都垂直居中，但找不到将底部复制固定到容器底部的好方法。

---------
|       |
|       |
|<form> |
|       |
|<copy> |
---------

.container {
  background-color: #eee;
  height: 100vh;
  width: 100vw;
  padding: 1em;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

form {
  
}

.bot {
  align-self: flex-end;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
   </form>
  <p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>

Answer 1

更新的答案

与 auto margins您可以在没有额外标记的情况下将 flex 元素分组或打包在一起，或者通过在相反方向应用边距来移动元素(如我的原始答案所示)。在这种情况下，只需在表单上设置 margin: auto；这将通知 flex 容器在剩余的所有可用空间内将表单居中:

.flex-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 150px;
  width: 400px;
  background: #e7e7e7;
}
 
form {
  margin: auto;
}

p {
  margin: 0;
}

<div class="flex-container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
  <p class="bot">
    Lorem ipsum dolor sit amet
  </p>
</div>

在此处查看其他答案以获得更多见解:

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

Can't scroll to top of flex item that is overflowing container

---

原始答案

“固定”flex child 的一个聪明方法是在与您希望它去的方向相反的方向上给它一个 auto 边距。在你的情况下，你想要设置

p.bot {
    margin-top: auto;
}

并且该段落将移动到父 flex 容器的底部。它适用于像这样的简单布局...

html,
body {
  margin: 0;
  padding: 0;
}
.container {
  background-color: #eee;
  height: 100vh;
  width: 100vw;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
form {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bot {
  margin-top: auto;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
  <p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>

编辑 请注意，我还使 form 成为 .container 中的嵌套 flexbox，并将其高度设置为 100%，这基本上是在做同样的事情。 Michael_B 在评论中有很好的解释。