小编Joh*_*ler的帖子

我正在尝试从 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。