Question

我有这样的html布局：

<div class="container">
  <div class="content">
    // content goes here
  </div>
</div>

我将100vh应用于容器div。我需要垂直居中放置内容。我发现，如果我将以下CSS应用于容器和内容，则可以将所有内容垂直放置在content div中，但是我想知道这是否不好，是否应该做其他事情？

display: flex;
justify-content: center;
align-items: center;

谢谢！

Answer 1

嵌套flex容器没有错或无效。 flexbox specification既不禁止也不反对这种做法。

实际上，这是需要将flex属性应用于顶级容器的后代时必须执行的操作，因为flex布局仅在父元素和子元素之间起作用。

此处有更多详细信息：Proper use of flex properties when nesting flex containers

Answer 2

这取决于您需要实现的目标。下面的一些结果使用不同的颜色使其更加可见。

两个项目都使用flexbox。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  height: 250px;
}

.content {
  background-color: red;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="content">
    <p>Content</p>
  </div>
</div>

仅将其用于容器

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  height: 250px;
}

.content {
  background-color: red;
  height: 200px;
  width: 200px;
}

<div class="container">
  <div class="content">
    <p>Content</p>
  </div>
</div>

最后只将其用于内容

.container {
  background-color: blue;
  height: 250px;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  height: 200px;
  width: 200px;
}

<div class="container">
  <div class="content">
    <p>Content</p>
  </div>
</div>

Answer 3

您只需要在容器上使用它即可

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

小提琴示例： http://jsfiddle.net/eq9y42nj/34/

这是您要寻找的吗？

将flex项变成flex容器是不好的做法吗？

3 个答案: