Question

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

.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

最简单的＆＃34;这样做的方法是使用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 issue。此示例与IE10 +跨浏览器兼容。

Demo

（要查看供应商前缀，请点击＆＃34;查看已编译的＆＃34;在CSS中。）

Answer 2

您可以尝试：background-clip和box-shadow以及transparent border s： DEMO

    .g {
        background: #FF9999;
        border: 8px solid transparent;/* you may tune individually border-size to get your 15px */
        box-shadow:inset 0 0 0 1px red;/* this will fake your border if set with out blur */
        background-clip:padding-box;/* do not show bgcolor under borders */
        border-radius: 15px;/* increase value so it has effect deeper seen  on inset box-shadow */
        padding: 15px;
    }

Answer 3

仅在镀铬中测试过，但似乎有效

尝试将样式更改为：

.g {
    //add margin style
    margin:15px;
}
.grid-33 {
    flex: 1 1 33.3333%;
}
.grid-50 {
    flex: 1 1 50%;
}
.grid-66 {
    flex: 1 1 66.6666%;
}
.grid-100 {
    flex: 1 1 100%;
}

Answer 4

即使这是旧的，我也有类似的问题。我通过添加额外元素并将样式移动到该元素来实现边距。这似乎非常强大，calc()无论多么好支持都不够整洁。

.padder {
  background: #FF9999;
  border: 1px solid red;
  border-radius: 8px;
  margin: 0 15px 15px 0;
  display:flex;
}

在额外元素上放置display:flex可确保其内容填充其中的空间。

http://jsfiddle.net/c3FL2/28/

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

4 个答案: