html - CSS flexbox 如何对嵌套的 div 应用规则？

Question

我想创建一个井字棋盘。我认为我必须为三个 div 中的每一个设置 flex-direction: row。

然而，仅将 css 设置到外部 div 是可行的:它将 3 个 div 对齐成一行。为什么有效？

.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>

输出:

147
258
369

Answer 1

如果您想使用flex 和嵌套的div 绘制3 行正方形，您需要调整父级的大小和叠层 flex ，列和行flex-direction。

这是一个使用 vmin 调整大小的示例，因此 #game 位于窗口中:

#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>