为什么 Flexbox "align-items: center" 似乎不适用于多行 div？

Question

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

我的问题是：当这些 div 不止一行时，如何沿着 cross-axis 对齐正方形 div（在本例中为垂直） .当有 2 行或更多行时，设置 "align-items: center" 似乎不再有效，如下所示。我可以创建一个容器 div within 容器 div 但这看起来不雅，我想尽可能避免它。对 flexbox newb 有什么建议吗？我在图像下方添加了 CSS 和 Javascript DOM 样式，但我不确定它是否会增加问题。最后它只是 display: flex 上下文中的几行列。

CSS（大部分是javascriptDOM）

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

The CSS align-content property defines how the browser distributes space between and around content items along the cross-axis of their container, which is serving as a flexbox container.

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>

为什么 Flexbox "align-items: center" 似乎不适用于多行 div？

Why does Flexbox "align-items: center" does not seem to work with multiple rows of divs?

html

css

vertical-alignment

flexbox