如何在两个Flex项目间添加边框？解决项目重叠问题

问题根源：你设置了flex: 1 50%，其中50%是flex项目的基准宽度，但border会额外占据元素宽度，两个项目总宽度超过容器的100%，再加上flex-flow: row wrap，就会导致项目换行/重叠。

以下是几种可行的解决办法：

方法一：用box-sizing: border-box让边框纳入宽度计算 #

这是最通用的方案，让元素的padding和border都包含在设置的宽度内，不会额外撑开元素。

修改后的CSS代码：

.flex-container {
    display: flex;
    overflow: hidden;
    flex-flow: row wrap;
    height: 100vh;
    .flex-item1 {
        flex: 1 50%;
        background-color: aqua;
        border: 1px solid black;
        box-sizing: border-box; /* 让边框包含在宽度内 */
    }
    .flex-item2 {
        flex: 1 50%;
        background-color: white;
        box-sizing: border-box; /* 统一设置更规范 */
    }
}

也可以在全局样式中添加* { box-sizing: border-box; }，一次性解决所有元素的宽度计算问题。

方法二：调整flex-basis的值，预留边框宽度 #

通过calc()计算出减去边框后的基准宽度，确保两个项目总宽度不超过100%：

.flex-container {
    display: flex;
    overflow: hidden;
    flex-flow: row wrap;
    height: 100vh;
    .flex-item1 {
        flex: 1 calc(50% - 2px); /* 减去左右各1px的border宽度 */
        background-color: aqua;
        border: 1px solid black;
    }
    .flex-item2 {
        flex: 1 calc(50% - 2px);
        background-color: white;
    }
}

注意：如果边框宽度变化，需要同步调整calc()里的数值。

方法三：用outline代替border（不占布局空间） #

outline是在元素外围绘制的线条，不会占据元素的宽度和高度空间，适合只需要视觉边框的场景：

.flex-container {
    display: flex;
    overflow: hidden;
    flex-flow: row wrap;
    height: 100vh;
    .flex-item1 {
        flex: 1 50%;
        background-color: aqua;
        outline: 1px solid black; /* 替换border */
    }
    .flex-item2 {
        flex: 1 50%;
        background-color: white;
    }
}

方法四：仅在项目间添加分隔线（更贴合需求） #

如果你的目标只是在两个项目中间加一条竖线，没必要给整个item加边框。可以给其中一个项目加单侧边框，配合box-sizing即可：

.flex-container {
    display: flex;
    overflow: hidden;
    height: 100vh; /* 不需要wrap，两个项目刚好占满宽度 */
    .flex-item1 {
        flex: 1;
        background-color: aqua;
    }
    .flex-item2 {
        flex: 1;
        background-color: white;
        border-left: 1px solid black; /* 仅左侧加边框，作为分隔线 */
        box-sizing: border-box;
    }
}

内容的提问来源于stack exchange，提问作者ItsFireStorm