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

Question

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

编辑：我必须在这里为我自己的问题提供一个解决方案。我使用带有overflow: hidden 的包装元素将something that works 放在一起，并将弹性框设置为width: calc(100% + 5px)。原来 Internet Explorer 不支持 flexbox 中的 box-sizing: border-box，但有一个解决方法是 I found here。

jsFiddle

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：

#main {
    margin-right: 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -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 33.3%;
    flex: 0 0 33.3%;
    border: 5px solid transparent;
}
#main div > span {
    display: block;
    width: 100%;
    min-height: 50px;
    background-color: #eaeaea;
}

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;
}

Answer 2

我认为最好的解决方案是使用 calc 属性。

例如，如果您希望列之间有 10 像素，您可以这样做：

相关 CSS：

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

    padding: 5px;  // gap-between-columns/2  
}

#main div {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid transparent;

    margin: 5px; // gap-between-columns/2  
    flex: 0 0 calc(33.33% - 10px); // calc( (100/number-of-columns) - gap-between-columns )

}