具有百分比宽度但固定边距的 Flexbox

Question

我正在尝试从 CSS 网格框架切换到 flex 布局（因为不同的项目高度，并且 flexbox 处理得非常好）。

所以，这就是我所做的：http : //jsfiddle.net/c3FL2/

.container {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    background: #9999FF;
}
.g {
    background: #FF9999;
    border: 1px solid red;
    border-radius: 8px;
    padding: 15px;
}
.grid-33 {
    width: 33.3333%;
}
.grid-50 {
    width: 50%;
}
.grid-66 {
    width: 66.6666%;
}
.grid-100 {
    width: 100%;
}

我的问题是：如何在弹性项目之间添加边距？我想要 15px，而不是百分比。如果我添加它，它会因为宽度太大而破坏布局。填充不是解决方案，因为我想要元素外的边框。

该解决方案不必与旧浏览器兼容，只需与最新浏览器兼容，因为它将在受控环境中运行。

编辑：如果需要，可以更改 HTML。

Answer 1

“最简单”的方法是使用 calc()。（如果您不必解决 IE 怪癖问题，当然会更容易，但最终结果非常简单。）您的代码将如下所示：

.container {
  padding: 15px 15px 0 0;
}
.g {
  margin: 0 0 15px 15px;
}
.grid-33 {
  with: calc(33.3333% - 15px);
}
.grid-50 {
  width: calc(50% - 15px);
}
.grid-66 {
  width: calc(66.6666% - 15px);
}
.grid-100 {
  width: calc(100% - 15px); // needed for IE10
}

使用的原因width是因为 IE10-11 不太喜欢calc与flex. 在这种情况下，这是一个box-sizing: border-box 问题。本示例跨浏览器兼容 IE10+。

演示

（要查看供应商前缀，请单击 CSS 中的“查看已编译”。）