将元素(弹性项目)固定到容器底部 [英] Pin element (flex item) to bottom of container

问题描述

我有一个容器作为整个窗口的高度/宽度.在这个容器内，我想要一个垂直的形式&水平居中.下面，我还想要在容器底部基线上的一份副本.类似于下面的糟糕插图.现在我只能让它们都垂直居中，并且找不到一个很好的方法来将底部复制固定到容器的底部.

---------|||||<表单>||||<复制>|---------

.container {背景色:#eee;高度:100vh；宽度:100vw；填充:1em；显示:弹性；文本对齐:居中；对齐内容:居中；弹性方向:列；}形式 {}.bot {align-self: flex-end;}

<表格><input type="text"/><button type="submit">submit</button></表单><p class="bot">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Omnis quae quisquam neque cupiditate adipisci magnam facilis，distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>

解决方案

更新答案

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

.flex-container {显示:弹性；弹性方向:列；文本对齐:居中；高度:150px；宽度:400px；背景:#e7e7e7；}形式 {保证金:自动；}p{边距:0；}

<表格><input type="text"/><button type="submit">submit</button></表单><p class="bot">Lorem ipsum dolor 坐 amet</p>

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

在 CSS Flexbox 中，为什么没有justify-items"?和证明自我"属性?

无法滚动到顶部容器溢出的弹性项目

<小时>

原答案

固定" flex 子级的一个聪明方法是给它一个 auto 在你想要它去的方向相反的方向上的边距.在你的情况下，你想设置

p.bot {边距顶部:自动；}

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

html,身体 {边距:0；填充:0；}.容器 {背景色:#eee;高度:100vh；宽度:100vw；显示:弹性；文本对齐:居中；对齐内容:居中；弹性方向:列；位置:相对；}形式 {高度:100%；显示:弹性；对齐项目:居中；对齐内容:居中；}.bot {边距顶部:自动；}

<表格><input type="text"/><button type="submit">submit</button></表单><p class="bot">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Omnis quae quisquam neque cupiditate adipisci magnam facilis，distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>

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

I have a container to be the full window height/width. Inside this container I want a form that's vertically & horizontally centered. Below, I also want a piece of copy on the bottom baseline of the container. Similar to the shitty illustration below. Right now I am only able to have them both centered vertically and can't find a nice way to make the bottom copy pin itself to the bottom of the container.

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

解决方案

Updated Answer

With auto margins you can group or pack flex items together without extra markup, or shift elements around by applying a margin in the opposite direction (as seen in my original answer). In this case, simply set margin: auto on the form; this will inform the flex container to center the form within all available space remaining:

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

See the other answers here for more insight:

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

---

Original Answer

A clever way to "pin" a flex child is to give it an auto margin in the direction opposite of where you want it to go. In your case, you'd want to set

p.bot {
    margin-top: auto;
}

and the paragraph will shift to the bottom of the parent flex container. It works pretty well with simple layouts such as this...

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>

Edit Note, I've also made the form a nested flexbox within the .container and set it's height to 100%, which is basically doing the same thing. Michael_B has a good explanation in the comments.

这篇关于将元素(弹性项目)固定到容器底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！