要设置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 >
当前回答
下面是一个使用灵活的方框完成间距的卡片UI元素网格:
我很沮丧手动间距卡操纵填充和空白与可疑的结果。下面是我发现的非常有效的CSS属性组合:
.card-container { 宽度:100%; 身高:900 px; overflow-y:滚动; max-width:继承; background - color: # ffffff; /*这里是有关flexbox的东西*/ 显示:flex; flex-direction:行; justify-content:中心; 对齐项目:flex-start; flex-wrap:包装; ｝ /* .card元素*/的补充样式 .card { 宽度:120 px; 身高:120 px; background - color: # ffeb3b; border - radius: 3 px; Margin: 20px 10px 20px 10px; ｝ <节课= " card-container " > < div class = "牌”> < / div > < div class = "牌”> < / div > < div class = "牌”> < / div > < div class = "牌”> < / 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>
只需在选择器中使用.item + .item来匹配第二个.item
#箱{ 显示:inline-flex; Margin: 0 -5px; ｝ .item { 背景:灰色; 宽度:10 px; 高度:50 px; ｝ #box .item + .item { margin-left: 10 px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >
更新:缝隙的flexbox现在支持所有现代浏览器(Edge/Chrome/Opera/三星互联网/Safari/Firefox)
最终，他们将把gap属性添加到flexbox中。在此之前，你可以使用CSS网格代替已经有间隙属性，只有一行。比处理边距要好。
我发布了我的flexbox方法 在这里:
我拒绝的一个想法是去掉外部列的填充物，就像这样:
div:nth-child(#{$col-number}n+1) { padding-left: 0; }
div:nth-child(#{$col-number}n+#{$col-number}) { padding-left: 0; }
但是，像这里的其他海报一样，我更喜欢负边距技巧。我的小提琴也有响应任何人正在寻找一个基于sass的解决方案。我基本上使用这种方法来代替网格。
https://jsfiddle.net/x3jvfrg1/
我找到了一个黑客，因为我真的很需要这个。
/* 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
