为什么Flexbox“align-items：center”似乎不适用于多行div？

Question

我正在摆弄一个更大的项目，该项目涉及生成具有任意尺寸（即n乘k平方元素）的方形div的网格。这些方形div被添加到网格容器中，而网格容器又需要占据其父级的宽度和高度的100％（此处不可见但设置为400px×400px）。

我的问题是：当这些div中有多行时，如何沿横轴（在本例中为垂直）对齐方形div。如下所示，当有2行或更多行时，设置“align-items：center”似乎不再有效。我可以在容器div中创建一个容器div ，但这似乎不够优雅，我想尽可能避免它。有关flexbox newb的任何建议吗？我在图像下方包含CSS和Javascript DOM样式，但我不确定它是否会增加问题。最后，它只是display: flex上下文中的行列。

CSS（大部分是javascript DOM）

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

#ticTacInterface {
  background-color: red;
  width: 400px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  display: flex;

}

javascript的摘录（试图仅抓取相关内容）

let GridContainer = function(numberOfCellsX, numberOfCellsY) {

  let numberOfCells = numberOfCellsX*numberOfCellsY;
  let xCordinateOfCell = 1;
  let yCordinateOfCell = 1;
  let rowElement = [];

  // dynamically creates styling details for the container grid.
  let currentPlayerColor = gameState.getCurrentPlayer().color;
  let dimensionsX = 100;
  let dimensionsY = 100;
  this.gridContainer = document.createElement("div");
  ticTacInterface.appendChild(this.gridContainer);
  this.gridContainer.style.width = String(dimensionsX) + "%";
  this.gridContainer.style.height = String(dimensionsY) + "%";
  this.gridContainer.style.display = "flex";
  if(numberOfCellsX>=numberOfCellsY) {
    this.gridContainer.style.flexDirection = "row";    
  }
  else if(numberOfCellsX<numberOfCellsY) {
    this.gridContainer.style.flexDirection = "column";    
  }
  this.gridContainer.style.alignItems = "center";
  // this.gridContainer.style.alignContent = "center";
  this.gridContainer.style.flexWrap = "wrap";
  this.gridContainer.style.alignContent = "flex-start";  

更多针对单元格的javascript样式

  let Cell = function(width, height, color, name) {
    this.newDiv = document.createElement("div");
    // this.newDiv.style.alignSelf = 'center';
    this.newDiv.name = name;
    this.newDiv.cellState = "dead";
    this.newDiv.style.backgroundColor = "transparent";
    if(numberOfCellsY === numberOfCellsX) {
      this.newDiv.style.height= "calc(100%/" + numberOfCellsY + ")";
      this.newDiv.style.width = "calc(100%/" + numberOfCellsX + ")"; 
    }
    else if(numberOfCellsY > numberOfCellsX) {
      this.newDiv.style.height= "calc(100%/" + numberOfCellsY + ")";
      this.newDiv.style.width = "calc(100%/" + numberOfCellsY + ")"; 

    }
    else if(numberOfCellsY < numberOfCellsX) {
      this.newDiv.style.height= "calc(100%/" + numberOfCellsX + ")";
      this.newDiv.style.width = "calc(100%/" + numberOfCellsX + ")";      
    }

Answer 1

您不希望align-items ...您想要align-content

  

CSS align-content属性定义浏览器如何沿着容器的横轴在内容项之间和周围分配空间，容器的横轴用作flexbox容器。

     

MDN

在这种情况下，交叉 =轴是垂直轴，您希望项目与该交叉轴的中心对齐。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.container {
  width: 400px;
  height: 500px;
  margin: 1em auto;
  background: red;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.box {
  width: 80px;
  height: 80px;
  border: 1px solid black;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>