标签：code   order   问题解决   ali   point   item   height   解决   center   

方法一：将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;
}

border占居了宽度，导致子元素在父元素中换行问题解决

标签：code   order   问题解决   ali   point   item   height   解决   center   

原文地址：https://www.cnblogs.com/zhizhi0810/p/11624692.html