我想创建一个井字棋盘。我认为我必须为三个 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
最佳答案
如果您想使用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>
关于html - CSS flexbox 如何对嵌套的 div 应用规则?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57244303/