HTML / CSS井字棋板：单元格在不应该移动的时候四处移动

Question

我正在学习HTML/CSS/JavaScript，我正在尝试在浏览器中制作一个Tic-Tac-Toe游戏。我以为我已经设置好了板，但注意到一旦我移除一个或多个X/O令牌，单元就会改变位置。我不知道是什么原因导致了这个错误，非常感谢帮助。

.board {
display: block;
width: 350px;
height: 350px;
margin: 70px auto;
}
.cell {
display: inline-flex;
margin: 2px 0;
border: 3px solid black;
width: 100px;
height: 100px;
box-shadow: 2px 2px;
justify-content: center;
align-items: center;
font-size: 100px;
}

<section class="board">
<h2>Player X's turn</h2>
<div class="row0">
<div class="cell c00">X</div>
<div class="cell c01">O</div>
<div class="cell c02">X</div>
</div>
<div class="row1">
<div class="cell c10">O</div>
<div class="cell c11">X</div>
<div class="cell c12">O</div>
</div>
<div class="row2">
<div class="cell c20">X</div>
<div class="cell c21">O</div>
<div class="cell c22">X</div>
</div>
</section>

提前感谢：(

Answer 1

这是因为您使用的是内联flex，它使div处于内联位置，并且相对于它所拥有的内容，您可以尝试更改字体大小，看看它如何影响所有div。我不知道你为什么要尝试使用内联flex，但我建议你阅读本指南。我个人只会将.row0、.row1和.row2设置为只显示：flex并用粗花呢将.bank的宽度调整一点

.board {
display: block;
width: 326px;
height: 350px;
margin: 70px auto;
}
.cell {
display: inline-flex;
margin: 2px 0;
border: 3px solid black;
width: 100px;
height: 100px;
box-shadow: 2px 2px;
justify-content: center;
align-items: center;
font-size: 100px;
}
.row0, .row1, .row2 {
display: flex;
justify-content: space-between;
}

<section class="board">
<h2>Player X's turn</h2>
<div class="row0">
<div class="cell c00">X</div>
<div class="cell c01">O</div>
<div class="cell c02"></div>
</div>
<div class="row1">
<div class="cell c10">O</div>
<div class="cell c11">X</div>
<div class="cell c12">O</div>
</div>
<div class="row2">
<div class="cell c20">X</div>
<div class="cell c21"></div>
<div class="cell c22">X</div>
</div>
</section>