Html Flexbox样式不适用于图元

无论我如何设置元素的样式，我应用的Flexbox样式都不起作用。我到处都在寻找解决方案，但找不到任何解决方案（如果这是重复的，我很抱歉，因为我找不到问题的答案）

我创造了一个新的世界

HTML:

---

提前感谢您提供的帮助。

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

在元素上设置

display:flex

时，其直接子元素将成为flexbox项。在您的示例中，

.test2

元素没有任何子元素，因此我假设您可能希望在父元素上添加

display:flex

.test{
高度：10公分；
宽度：10em；
背景：#333；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.test2{
高度：2.5em；
宽度：2.5em；
背景：#ff0000；
}

这里没有问题。也许你可以澄清问题所在。谢谢你的快速回答。这真的很有帮助！没有足够的代表公开投票，所以+1。

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

* {
    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;
}