Question

我想用柔性盒将div居中，但不要让它崩溃。

#forum {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.forum__layout__container {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  margin-top: 30px;
}

这里是HTML ...

<div id="forum">
  <div class="forum__layout__container">
    ...
  </div>
</div>

问题：forum__layout__container崩溃了。我希望它能填满整个屏幕。

感谢。

修改

感谢您的尝试，但我的问题是我max-width ...这使我的容器崩溃，我不想要！

Answer 1

要将整个屏幕用于列，您需要指定高度。然后使用justify-content时，flexbox将自动传播内容。

＆＃13;

#forum {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.forum__layout__container {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  margin-top: 30px;
  height: 100vh;
  justify-content: space-around;
}

p {
  margin: 0;
}

＆＃13;

<div id="forum">
  <div class="forum__layout__container">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>
</div>

＆＃13;

CSS Flex-Boxes：不要折叠中心内容

1 个答案: