销元素（柔性项目）到容器底部 [英] Pin element (flex item) to bottom of container

问题描述

我有一个容器是全窗口的高度/宽度。在这个容器内，我想要一个垂直&水平居中。下面，我还想要一个副本的底部基线的容器。类似于下面的shitty图。现在我只能使它们都垂直居中，并且找不到一个很好的方法使底部复制针本身到容器底部。

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

  .container {background-color：#eee;高度：100vh; width：100vw; padding：1em;显示：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。 < / div>  

div>

解决方案

一个聪明的方式来固定flex的孩子是给它一个 auto 在你想要去的地方相对的方向。在您的情况下，您需要设置

  p.bot {
 margin-top： 
} 
  

，段落将移动到父容器的底部。

  html，body {margin：0; padding：0;}。container {background-color：#eee;高度：100vh; width：100vw;显示：flex; text-align：center; justify-content：center; flex-direction：column; position：relative;} form {height：100％;显示：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。 < / div>  

div>

编辑注意，我也创建了表单 .container 中的嵌套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>

解决方案

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