Html 为什么忽略“对齐内容”和“对齐项目”？

在下面的代码段中，为什么

justify content

和

align items

没有效果？我希望列位于包含框的中心，底部的额外空间分布在框的周围。为什么不是这样

.column{
边框：2件纯黑；
显示：柔性柱；
证明内容：周围的空间；
对齐项目：居中；
高度：300px；
}
.卡片{
背景：红色；
边框：1px纯绿色；
宽度：50px；
高度：50px；
}

使用

.column{
边框：2件纯黑；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
高度：300px；
}
.卡片{
背景：红色；
边框：1px纯绿色；
宽度：50px；
高度：50px；
}

---

您所给出的一切都是正确的。但不应在显示器本身中给出弯曲方向

显示器：flex； -webkit柔性方向：列

html:

Css:

.栏目
{
边框：2件纯黑；
显示器：flex；
-webkit柔性方向：列；
证明内容：周围的空间；
对齐项目：居中；
高度：300px；
宽度：500px；
}
.卡片{
背景：红色；
边框：1px纯绿色；
宽度：50px；
高度：50px；
}

首先，您只显示一些代码。第二，你是在使用flexbox还是仅仅从另一个站点获取代码？错了。首先，我在所有代码中都包含了一个可运行的代码段。第二，我写了这段代码，它不是来自另一个网站。那么你在使用flexbox吗？如果您不知道，那么这将不起作用（也包括一个不包含flexbox的代码段也不起作用），它不应该是

display:flex？我投票认为这是一个打字错误，因为这是这个问题的基本原因。不。它们应该显示为
flex列
，而不是
flex
。这是不存在的。你是说
flex-direction:column
？谢谢，出于某种原因，我认为这是一条捷径，而且没有意识到它们只是向下显示，因为flex由于一个无效值而被忽略。@Jonah-一个有用的速记属性，它包含了
flex direction
和
flex wrap
。@misterManSam，是的，我想这就是我困惑的根源。我记得有一个带有“column”的多值属性，并假设它是
flex
本身
display: flex;
flex-direction: column;

<div class="column">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>

</body>

<style>

.column 
{
border: 2px solid black;
display:flex;
-webkit-flex-direction:column;
justify-content: space-around;
align-items:center;
height: 300px;
width:500px;
}
.card {
background: red;
border: 1px solid green;
width: 50px;
height: 50px;
}

</style>