border占居了宽度,导致子元素在父元素中换行问题解决
方法一:将border改成outline
outline是不占据父级空间的
.chess {
width : 50px;
height: 50px;
outline: 2px solid lightgray;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
方法二: 将盒子设置成border-box
.chess {
width : 50px;
height: 50px;
border: 2px solid lightgray;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}