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

Question

I am fiddling with a larger project which involves generating a grid of square divs with arbitrary dimensions (ie of n by k square elements). These square divs are added to a grid container which in turn needs to take up 100% of the width and height of its parent (invisible here but set to 400px by 400px).

My question is this: how can I align the square divs along the cross-axis (vertically in this case) when there is more than one row of these divs. Setting "align-items: center" no longer seems to work when there are 2 or more rows as shown below. I could create a container div within the container div but that seems inelegant and I would like to avoid it if at all possible. Any suggestions for a flexbox newb? I included CSS and Javascript DOM styling below the images but I'm not sure it adds much to the problem. In the end it is just rows of columns in a display: flex context.

The CSS (most of this is 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;

}

Excerpts of the javascript (tried to grab only relevant stuff)

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

More javascript styling for the cell itself

  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 + ")";      
    }

containerOfGridContainer { background-color: red; width: 400px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 50px; display: flex; } — Shadow43375, Apr 12 '18 at 22:14
Hehe, I meant post the css in your question above. :) When posting questions you want to provide as much information as possible with as much clarity as possible to make it easy for people to answer your questions. (Don't forget to format the code as well!) — Gerik, Apr 12 '18 at 22:21
I realized that after posting it haha. I normally include code but I was afraid that it would confuse more than help given that most of my question dealt with cross-axis alignment and only one line of my code does... — Shadow43375, Apr 12 '18 at 22:31

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

You don't want align-items...you want 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

In this case the cross=axis is the vertical one and you want the items to align center of that cross-axis.

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

Thanks folks! I realize that my mistake had been that I had accidentally tried setting the align-content to start much earlier in the project and later in the code block and had forgotten to remove it. Much Ado about nothing but much thanks. — Shadow43375, Apr 13 '18 at 01:59

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

1 Answers1