Q:

How does CSS flexbox apply rules to nested divs?

I want to create a tic-tac-toe board. I would think that I have to set flex-direction: row for each of the three divs.
However setting the css only to the outer div works: It aligns the 3 divs in a row. Why does it work?

.game {
  display: flex;
  flex-direction: row;
}
<div class="game">
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  <div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</div>

OUTPUT:
147
258
369

A:

If you want to use flex and nested div to draw 3 rows of squares, you will need to size the parent and imbricate flex , with column and row flex-direction.
here is an example using vmin for sizing, so the #game, stands in the window:

#game {
  height: 80vmin;
  width: 80vmin;
  display: flex;
  flex-direction: column;
}

#game>div {
  display: flex;
  flex: 1;
  /* spray them evenly */
}

#game>div div {
  border: 1px solid;
  flex: 1;
  /* spray them evenly */
  margin: 1px;
  /* or no margin */
}


/* demo, centering */

html {
  height: 100vh;
  display: flex;
}

body {
  margin: auto;
}


/* add on extra flex level ? */

#game>div div {
  display: flex;
  align-items: center;
  justify-content: center;
  /* - is vmin usefull sometines ?
- maybe */
  font-size: 8vmin;
}
<div id="game">
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  <div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</div>

