弹性盒子布局不适用于元素

Question

无论我如何为一个元素设置样式，应用的Flexbox样式都不起作用。我已经到处搜索解决方案，但是没有找到任何答案（如果这是重复问题，那么请原谅，因为我无法找到问题的答案）。

我已经在这里的CodePen中创建了一个示例。

HTML:

<div class="test">
    <div class="test2">
    </div>
</div>

CSS：

* {
    padding: 0;
    margin: 0;
}

.test {
    height: 10em;
    width: 10em;
    background: #333;
}

.test2 {
    height: 2.5em;
    width: 2.5em;
    background: #ff0000;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
}

提前感谢您提供的任何帮助。

- Myzostal

---

这里没有问题。也许您可以澄清一下问题所在。 - Paulie_D

Answer 1

您需要将这些CSS规则添加到父元素中。

当您在元素上设置display: flex时，其直接子元素成为flexbox项目。在您的示例中，.test2元素没有任何子元素，因此我假设您可能想要将display: flex添加到父元素中。

.test {
  height: 10em;
  width: 10em;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.test2 {
  height: 2.5em;
  width: 2.5em;
  background: #ff0000;
}

<div class="test">
  <div class="test2"></div>
</div>

- Josh Crozier

---

谢谢您的快速回答，真的帮了我很多！由于我的声望还不够高，无法公开点赞，所以在这里+1。 - Myzostal