要设置flexbox项目之间的最小距离，我使用margin: 0 5px on .item和margin: 0 -5px on container。对我来说，这似乎是一种hack，但我找不到更好的方法来做到这一点。
#箱{ 显示:flex; 宽度:100 px; Margin: 0 -5px; ｝ .item { 背景:灰色; 宽度:50 px; 高度:50 px; 边距:0 5px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >
当前回答
我找到了一个黑客，因为我真的很需要这个。
/* grid */ .container { 显示:flex; Flex-flow:行换行; justify-content:之间的空间; ｝ .container::在/*之后，这确保奇数元素向左，而不是*/之间的空格 .item { 内容:“”; 宽度:calc(33.3333% - 20px); margin-bottom: 40像素; ｝ /*额外的样式-不重要*/ .item { 身高:100 px; 背景:# 787878; ｝ < div class = "容器" > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < / div >
这是一个带有很好的伸缩增长类别的post网格。 我想你会喜欢的。 看到Codepen
其他回答
你可以使用透明边框。
我在尝试构建一个灵活的网格模型时考虑过这个问题，该模型可以为旧的浏览器退回到表格+表格单元模型。在我看来，作为圆柱排水沟的Borders似乎是最合适的选择。例如，表格单元格没有边距。
e.g.
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
还要注意你需要min-width: 50px;flexbox。flex模型不会处理固定大小，除非你执行flex: none;在你想要固定的子元素上，因此被排除在“可伸缩”之外。http://jsfiddle.net/GLpUp/4/ 但是所有列和flex一起:none;不再是弹性模型。 这里有一个更接近flex模型的东西:http://jsfiddle.net/GLpUp/5/
所以你可以正常使用页边距如果你不需要旧浏览器的表单元格回退。http://jsfiddle.net/GLpUp/3/
背景剪辑:填充盒;在使用背景时将是必要的，否则背景将流入透明边框区域。
比如说，如果你想在项目之间设置10px的空间，你可以为所有项目设置。item {margin-right:10px;}，并在最后一个项目上重置它。item:last-child {margin-right:0;}
你也可以使用一般的sibling ~或next + sibling选择器来设置除第一个项目之外的项目的左距。item ~ .item {margin-left:10px;}或使用.item:not(:last-child) {margin-right: 10px;}
Flexbox非常聪明，它可以自动重新计算并平均分配网格。
身体{ 保证金:0; ｝ .container { 显示:flex; ｝ .item { flex: 1; 背景:灰色; 高度:50 px; ｝ .item:没有(胎){ margin-right: 10 px; ｝ < div class = "容器" > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < / div >
如果要允许使用弹性包装，请参见下面的示例。
身体{ 保证金:0; ｝ .container { 显示:flex; flex-wrap:包装; margin-left: -10 px; ｝ .item { Flex: 0 0 calc(50% - 10px); 背景:灰色; 高度:50 px; Margin: 0 0 10px 10px; ｝ < div class = "容器" > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < / div >
从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>
我找到了一个黑客，因为我真的很需要这个。
/* grid */ .container { 显示:flex; Flex-flow:行换行; justify-content:之间的空间; ｝ .container::在/*之后，这确保奇数元素向左，而不是*/之间的空格 .item { 内容:“”; 宽度:calc(33.3333% - 20px); margin-bottom: 40像素; ｝ /*额外的样式-不重要*/ .item { 身高:100 px; 背景:# 787878; ｝ < div class = "容器" > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < / div >
这是一个带有很好的伸缩增长类别的post网格。 我想你会喜欢的。 看到Codepen
做到这一点的简单方法是在children div中添加margin-left和margin-right，并相应地调整margin值
<div class="a">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
css:
.a{
display: flex;
justify-content: center;
background-color: black;
}
.b{
height: 25px;
width: 25px;
background-color: grey;
margin-left: 5px;
margin-right: 5px;
}
