这不是黑客。 bootstrap和它的网格也使用了同样的技术，不过，bootstrap为它的cols使用了padding而不是margin。

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}

Flexbox和css计算与多行支持

你好，下面是我的工作解决方案，所有浏览器支持flexbox。没有负边距。

小提琴演示

.flexbox { 显示:flex; flex-direction:行; flex-wrap:包装; justify-content:之间的空间; ｝ .flexbox > div { ／* 每行1/3 - 3列 10px -列之间的间距 * / box-sizing: border-box; Margin: 10px 10px 0 0; 轮廓:1px虚线红色; 宽度:calc(1/3*100% - (1 - 1/3)*10px; ｝ ／* 将最后一行列向左对齐 3n -每行3列 * / .flexbox > div:n -child(3n) { margin-right: 0; ｝ {后.flexbox:: 内容:”; flex:汽车; ｝ ／* 删除第一行的上边距 -n+3 -每行3列 * / .flexbox > div:n -child(-n+3) { margin-top: 0; ｝ < div class = " flexbox”> < div >坳< / div > < div >坳< / div > < div >坳< / div > < div >坳< / div > < div >坳< / div > < / div >

请注意，使用SASS可以使这段代码更短

更新2020. ii.11 在最后一行向左对齐的列

更新2020. ii.14 移除了最后一行的margin-bottom

确实有一种很好的、整洁的、只使用css的方法来做到这一点(可以认为“更好”)。

在这里发布的所有答案中，我只找到了一个成功使用calc()的答案(由Dariusz Sikorski)。但当提出:“但如果最后一行只有2项，它就失败了”时，就没有展开解。

这个解决方案解决了OP的问题，替代了负边际，解决了Dariusz的问题。

注:

本例只演示了3列布局 它使用calc()让浏览器以它想要的方式进行数学运算—— 100%/3(尽管33.3333%也可以)，以及 (1em/3)*2(尽管。66em也可以)。 如果元素少于列，则使用::after填充最后一行

.flex-container { 显示:flex; justify-content:之间的空间; flex-wrap:包装; ｝ .flex-container:{后 内容:“”; ｝ .flex-container > .flex-container:{后 box-sizing: border-box; 宽度:calc((100%/3) - ((1em/3)*2)); ｝ .flex-container >:n -child(n + 4) { margin-top: 1 em; ｝ /*下面只是为了可视化项目*/ .flex-container > .flex-container:{后 字体大小:2 em; ｝ .flex-container { margin-bottom: 4 em; ｝ .flex容器> div { text-align:中心; background - color: # aaa级; 填充:1 em; ｝ .flex-container:{后 边框:1px红色虚线; ｝ <h2>示例1(2个元素)</h2> < div class = " flex-container”> < div > 1 < / div > 2 < div > < / div > < / div > <h2>示例2(3个元素)</h2> < div class = " flex-container”> < div > 1 < / div > 2 < div > < / div > < div > 3 < / div > < / div >

另见https://codepen.io/anon/pen/rqWagE

从sawa的答案开始，这里有一个稍微改进的版本，允许您在没有周围边距的情况下设置项目之间的固定间距。

http://jsfiddle.net/chris00/s52wmgtq/49/

还包括Safari“-webkit-flex”版本。

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>

为什么不这样做呢:

.item + .item {
    margin-left: 5px;
}

它使用相邻的兄弟选择器，为所有.item元素赋值，除了第一个元素左距。多亏了flexbox，这甚至导致了同样宽的元素。当然，这也可以通过垂直定位的元素和margin-top来实现。

你可以用下面的方程

.container { max-width: 960 px; 保证金:0自动; 填充:4rem 0; ｝ .flex { 显示:flex; 对齐项目:中心; justify-content:之间的空间; flex-wrap:包装; ｝ .flex:{后 内容:“”; max-width:钙(100% * var(——坳)/ 12 - var(差距)); 宽度:100%; ｝ @media (max-width: 960px) { .flex:{后 max-width: calc(100% * var(——colTablet) / 12 - var(——gap)); ｝ ｝ @media (max-width: 680px) { .flex:{后 max-width: calc(100% * var(——colMobile) / 12 - var(——gap)); ｝ ｝ .flex .item { max-width:钙(100% * var(——坳)/ 12 - var(差距)); 宽度:100%; ｝ @media (max-width: 960px) { .flex .item { max-width: calc(100% * var(——colTablet) / 12 - var(——gap)); margin-bottom: 1快速眼动; ｝ .flex .item:last child { margin-bottom:设置; ｝ ｝ @media (max-width: 680px) { .flex .item { max-width: calc(100% * var(——colMobile) / 12); ｝ ｝ .flex .item .card { 背景:# eee; text-align:中心; 填充:2快速眼动; ｝ <div class="flex container" style="——col: 3;——colTablet: 6;——colMobile: 12个;——差距:2%”> <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > < / div >