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，您可以将灵活项目分组或打包而不需要额外的标记，或者通过在相反方向应用边距来移动元素（如我原来的答案中所示）。在这种情况下，只需在表单上设置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

原始答案

一个聪明的方法来“固定”一个灵活的孩子，就是在与你想去的地方相反的方向上给它一个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嵌套的弹性框，并将其高度设置为100％，这基本上是做同样的事情。 Michael_B在评论中有一个很好的解释。

Answer 2

您可以使用容器上的:before创建一个伪元素，将其设为三个部分，然后使用justify-content: space-between;

＆＃13;

* {
    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: '';
}

＆＃13;

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

＆＃13;

<强> jsfiddle

Answer 3

以下是您遇到的问题：

您已将flex-direction设置为column。这意味着您已经转移了main axis to vertical, and the cross axis to horizontal。

align-*属性沿横轴工作。因此，当您告诉.bot align-self: flex-end时，您实际上是在告诉它向右移动，而不是向下移动。

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

想要将<copy>固定在屏幕底部，Flexbox有一些限制：有no property similar to align-self for the main axis。

还有其他几种方法可以完成工作。您可以将flexbox嵌套在当前容器中，或从此容器中删除.bot并将其放在另一个容器中。

Flexbox还允许absolutely-positioned flex children。试试这个：

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

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

DEMO

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

Answer 4

align-self: flex-end;没有所需的效果，因为flex子项列为列。

在不添加任何额外标记的情况下，根据需要对其进行排序的一种简单方法是：

将页脚元素移出.container

<div class="container"></div>
<p class="bot"></p>

给身体（或其他包装，如果需要）display: flex，以便.container和页脚是灵活的孩子（兄弟姐妹）。
赋予.container flex: 1 1 100%;的flex属性。这将使其从100％的初始值增长和缩小。页脚被向下推，但容器的高度适合容器收缩。
为页脚赋予flex: 1 1 auto的flex属性。现在这将被推到底部，但会增加更多内容的高度。

详细了解flex属性over on the MDN。

实施例

* {
  margin: 0;
  padding: 0;

}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
.container {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #EEE;
}
.bot {
  flex: 1 1 auto;
  text-align: center;
  background: #EEE;
  padding: 1em;
}

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

Answer 5

将flex-direction更改回column，将其中一个容器设置为width: 100%并使用flex-wrap: wrap来实现此目的。

这样的东西（它可以在Firefox和IE 10+中使用供应商前缀）：

＆＃13;

.container {
  background-color: #333;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
}

.footer {
  width: 100px;
  height: 20px;
  margin-top: -20px; /* set the margin top to negative what the 
                        height is so the form is perfectly centered */
  background-color: #900;
  color: #fff;
  text-align: center;
}

.form-wrapper {
  width: 100%; /* needs to be 100% to force the items to wrap */
  height: 50px;
  background-color: #009;
  
  /* center the form inside the wrapper */
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="container">
  <div class="form-wrapper">
    <form>
      <input type="text">
      <button type="submit">submit</button>
    </form>
  </div>
  <div class="footer">footer content</div>
</div>

＆＃13;

将元素（弹性项目）固定到容器的底部

5 个答案:

更新答案

原始答案

实施例