我正在尝试从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。
您可以尝试：background-clip和box-shadowand transparent borders：演示
.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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句