如何让flex布局下50%宽度的li元素margin从自身宽度扣除？

这是flex布局里很常见的间距问题——因为margin属于元素的外部空间，不会被box-sizing: border-box包含，所以你设置的width:50%加上margin-right:10px后，两个元素的总宽度就超过了容器的100%，自然会换行。下面给你两种实用的解决办法：

方法一：使用CSS calc()精确计算宽度 #

直接把li的宽度调整为容器宽度的一半减去右侧margin的一半（因为两个li之间只需要一个10px的间距），这样就能刚好填满一行：

修改后的CSS代码：

.role-select__selection{
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.role-select__selection li{
  width: calc(50% - 5px); /* 50%宽度减去5px，抵消一半的margin-right */
  border: 1px solid;
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 0.70em;
  margin: 10px 10px 0 0;
  padding: 8px 8px;
}

解释：两个li的width: calc(50% -5px)加起来是100% -10px，再加上它们之间的10px margin-right，总宽度刚好等于容器的100%，完美适配每行两个元素。

方法二：使用Flex布局的gap属性（更简洁推荐） #

Flex原生的gap属性就是专门用来处理flex项目之间的间距的，它不会影响元素的宽度计算，直接在父容器设置即可：

修改后的CSS代码：

.role-select__selection{
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  gap: 10px 10px; /* 第一个值是上下间距，第二个是左右间距 */
}

.role-select__selection li{
  width: 50%;
  border: 1px solid;
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 0.70em;
  margin-top: 0; /* 去掉原来的margin-top，用gap的上下间距代替 */
  padding: 8px 8px;
}

解释：gap会自动在li之间添加指定的间距，不需要你手动计算宽度，代码更简洁易维护，而且兼容性现在也很好（支持现代浏览器）。如果需要保留顶部的间距，你可以给父容器加padding-top:10px，或者调整gap的第一个值为10px即可。

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