将元素(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

更新的答案

使用自动边距,您可以将弹性项目分组或打包而无需额外标记,或者通过在相反方向应用边距来移动元素(如我原始答案中所示).在这种情况下,只需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>

请在此处查看其他答案以获取更多信息:

在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？

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

原始答案

一个聪明的方法来"固定"一个灵活的孩子就是给它一个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一个嵌套的flexbox .container并将其高度设置为100%,这基本上是做同样的事情.Michael_B在评论中有一个很好的解释.

Answer 2

您可以通过:before在容器上使用创建一个伪元素,使其成为三个部分,并使用justify-content: space-between;

* {
    margin: 0;
}
.container {
    background-color: #eee;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    text-align: center;
}
.container:before {
    content: '';
}

<div class="container">
    <form><input type="text" /> <button type="submit">submit</button></form>
    <p>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>

的jsfiddle

Answer 3

这是你遇到的问题:

你已经设置flex-direction为column.这意味着您已将主轴移至垂直,并将横轴移至水平.

该align-*属性沿十字轴工作.因此,当你告诉.bot时align-self: flex-end,你实际上是在告诉它向右移动,而不是向下移动.

但是在这种情况下它不会向右移动,因为该物品占据了容器的整个宽度,因此没有移动的空间.但是,如果你限制它的宽度... http://jsfiddle.net/t7hap87o/

想要固定<copy>到屏幕的底部,flexbox有一些限制:没有类似于align-self主轴的属性.

完成工作还有其他几种选择.您可以将flexbox嵌套在当前容器中,或.bot从此容器中移除并将其放入另一个容器中.

Flexbox还允许绝对定位的flex儿童.试试这个:

.container {
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
}

.bot {
    position: absolute;
    bottom: 0;
}

DEMO

注意:margin-top: auto打开.bot将无法在当前HTML结构中使用.事实上,它会将目标元素固定在底部.但它也会将中心元素一直推到顶端.