当使用flexbox垂直居中时，如果高度未知会出现问题。

Question

当使用flexbox垂直居中时，如果高度未知会出现问题。

69

我的布局有一个容器flex-container和一个子元素。

HTML:

<div class="flex-container">
  <div>text</div>
</div>

容器和子元素的高度未知。目标是:

如果子元素高度小于容器高度，它将在水平和垂直方向上居中显示。
如果子元素高度大于容器高度，它将调整到顶部和底部，并且我们可以进行滚动。

示意图: enter image description here

使用flexbox进行元素居中的最快方法如下:

.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen: http://www.codepen.io/ces/pen/slicw

但是，如果容器的子元素高度更大，则子元素将无法正确显示。子元素将被截断（仅显示顶部部分）。

html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.flex-container
{
  display: flex;
  align-items: center; // vertical
  justify-content: center; // horizontal
  
  width: 100%;
  height: 100px;
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen: http://www.codepen.io/ces/pen/sGtfK

Scheme:

enter image description here

有没有解决这个问题的方法？

- cespon

3个回答

0

不要使用 justify-content: center 或 align-items: center。为了实现居中对齐，只需在两侧放置空元素，并将这些空元素设置为 flex: 1，这样它们就会将中心元素推向中心位置。

- Kernel James

-1

将align-self:flex-start;添加到.flex-container > div也可以解决这个问题。

参见：http://www.w3.org/TR/css-flexbox-1/#auto-margins。

- iwege

1

这个回答直接回答了问题，而不像被接受的答案那样提供了一个解决方法。+1 - RienNeVaPlu͢s

8

你的解决方案是简单地忽略居中的要求。当然，如果不需要居中，就不会有问题。 - Michael Benjamin

3

这不是正确答案，因为它忽略了垂直居中。所以这并不是一个解决方案。 - ranzwertig

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cespon · Accepted Answer

我找到了解决方案：

.flex-container {
    display: flex; /* only */
    overflow-y: scroll;
}

.flex-container > div {
    margin: auto; /* horizontal and vertical align */
}

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.flex-container {
    display: flex;
    width: 100%;
    height: 100px; /* change height to 300px */
    overflow-y: scroll;
    background: #2a4;
}

.flex-container > div {
    padding: 1em 1.5em;
    margin: auto;
    background: #E77E23;
    width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen: http://codepen.io/ces/pen/Idklh