html - Flexbox样式不适用于元素

无论我如何设置元素的样式，我应用的所有flexbox样式都无法工作。我到处寻找解决办法，但找不到（抱歉，如果这是重复的，因为我找不到问题的答案）。
我已经创建了一个CodePen here。
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;
}

提前感谢您的帮助。

最佳答案

您需要将这些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>