为什么requirey-content和align-items被忽略？

Question

在下面的代码段中，为什么justify-content和align-items无效？我希望列在包含框内居中，底部的额外空间分布在框周围。为什么不是这样？

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

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

Answer 1

使用

display: flex;
flex-direction: column;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你提供的一切都是正确的。但是你不应该在显示器本身给出弯曲方向。

显示：弯曲; -webkit-FLEX-方向：柱;

HTML：     

<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>

的CSS：

<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>