如何从 flexbox 中的所有包装行中删除左右边距（没有 nth-child 或 js）

Question

我正在寻找一种好方法，可以在不使用 ::nth-child 或 JavaScript 的情况下从每行中的每个第一个和最后一个项目中删除左右边距。如果这是不可能的，那么我想下一个最好的方法是在主 flexbox 元素上设置负的左/右外边距，但我不太确定使用width: 100%. 基本上我想要的是这个 flexbox 的左侧和右侧没有蓝色。

编辑：我将不得不在这里为我自己的问题提供解决方案。我将使用包装器元素的东西放在一起，overflow: hidden并将 flexbox 设置为width: calc(100% + 5px). 事实证明 Internet Explorerbox-sizing: border-box在 flexbox中不支持，但我在这里找到了一种解决方法。

js小提琴

HTML：

<div id="main">
    <div><span>div 1</span></div>
    <div><span>div 2</span></div>
    <div><span>div 3</span></div>
    <div><span>div 4</span></div>
    <div><span>div 5</span></div>
    <div><span>div 6</span></div>
    <div><span>div 7</span></div>
    <div><span>div 8</span></div>
    <div><span>div 9</span></div>
    <div><span>div 10</span></div>
    <div><span>div 11</span></div>
</div>

CSS：

<div id="main">
    <div><span>div 1</span></div>
    <div><span>div 2</span></div>
    <div><span>div 3</span></div>
    <div><span>div 4</span></div>
    <div><span>div 5</span></div>
    <div><span>div 6</span></div>
    <div><span>div 7</span></div>
    <div><span>div 8</span></div>
    <div><span>div 9</span></div>
    <div><span>div 10</span></div>
    <div><span>div 11</span></div>
</div>

Answer 1

我将 更改justify-content为space-between，并调整了 flex-basis 以配合此更改，并在顶部和底部提供元素填充，但在左侧和右侧添加 0。

相关CSS：

#main {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    background-color: lightblue;
}

#main div {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 32.3%;
    flex: 0 0 32.3%;

   padding-right:0px;
   padding-left:0px;
   padding-bottom:5px;
   padding-top:5px;
}