为什么flex框不垂直和水平对齐内的项目？

Question

正如我从文档中了解到的，对齐项将以主轴为中心，而对齐项则以交叉轴为中心。那么，为什么中心框只对齐轴(现在是垂直的)？

通过改变为flex-direction: column;，它将水平对齐，但主轴似乎再次被忽略，因此在这种情况下它不会垂直中心。

​

.flex 
{
  display: flex;
  justify-items: center; /* Does not seem to work */
  align-items: center;
}

.center-box
{
  background: green;
}

/* Flavor */
.flex 
{
  margin: 0 auto;
  width: 200px;
  height: 200px;
  background: red;
}

<div class="flex">
  <div class="center-box">Center Box</div>
</div>

​

Answer 1

它的justify-content:center;而不是justify-items:center;

Answer 2

​

.flex 
{
  display: flex;
  justify-content: center; 
  align-items: center;
}

.center-box
{
  background: green;
}

/* Flavor */
.flex 
{
  margin: 0 auto;
  width: 200px;
  height: 200px;
  background: red;
}

<div class="flex">
  <div class="center-box">Center Box</div>
</div>

​