要设置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 >
当前回答
假设:
你想要4列网格布局与包装 项目的数量不一定是4的倍数
除了第1、5、9项以外，每项都设置左距;并在每个项目上设置固定宽度。如果左边的边距是10px，那么每行4个项目之间的边距是30px，项目宽度的百分比可以计算如下:
100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4
这是一个体面的工作，涉及flexbox最后一行的问题。
.flex { 显示:flex; flex-direction:行; flex-wrap:包装; 保证金:1em 0; background - color:桃色; ｝ .item { margin-left: 10 px; 边框:1px实体; 填充:10 px; 宽度:calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4); background - color:番木瓜; ｝ .item:n -child(4n + 1) { margin-left: 0; ｝ .item:n -child(n + 5) { margin-top: 10 px; ｝ flex < div class = " " > < div class = "项目" > < / div > 1 < div class = "项目" > < / div > 2 < div class = "项目" > 3 < / div > 4 < div class = "项目" > < / div > < / div > flex < div class = " " > < div class = "项目" > < / div > 1 < div class = "项目" > < / div > 2 < div class = "项目" > 3 < / div > 4 < div class = "项目" > < / div > 5 < div class = "项目" > < / div > < div class = "项目" > < / div > 6 < / div > flex < div class = " " > < div class = "项目" > < / div > 1 < div class = "项目" > < / div > 2 < div class = "项目" > 3 < / div > 4 < div class = "项目" > < / div > 5 < div class = "项目" > < / div > < div class = "项目" > < / div > 6 < div class = "项目" > < / div > 7 < div class = "项目" > < / div > 8 < div class = "项目" > < / div > 9 < / div >
其他回答
这不是黑客。 bootstrap和它的网格也使用了同样的技术，不过，bootstrap为它的cols使用了padding而不是margin。
.row {
margin:0 -15px;
}
.col-xx-xx {
padding:0 15px;
}
一个带有-x(负)边距的伸缩容器和带有x(正)边距或填充的伸缩项都会导致预期的视觉结果:伸缩项之间只有2x的固定间距。
这似乎只是一个偏好问题，是在伸缩项上使用边距还是填充。
在这个例子中，为了保持固定的间隙，伸缩项是动态缩放的:
.flex-container {
margin: 0 -5px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.flex-item {
margin: 0 5px; // Alternatively: padding: 0 5px;
flex: 1 0 auto;
}
我发布了我的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/
Columnify -一个包含N列的单独类
Flexbox和SCSS
.columnify {
display: flex;
> * {
flex: 1;
&:not(:first-child) {
margin-left: 2rem;
}
}
}
Flexbox和CSS
.columnify { 显示:flex; ｝ .columnify > * { flex: 1; ｝ .columnify > *:not(:第一个孩子){ margin-left: 2快速眼动; ｝ < div class = " columnify”> < span style=" font - family:宋体;高度:20 px;背景颜色:蓝色;" > < / div > < span style=" font - family:宋体;高度:20 px;背景颜色:蓝色" > < / div > < span style=" font - family:宋体;高度:20 px;背景颜色:蓝色" > < / div > < / div >
在JSFiddle上玩它。
你可以使用透明边框。
我在尝试构建一个灵活的网格模型时考虑过这个问题，该模型可以为旧的浏览器退回到表格+表格单元模型。在我看来，作为圆柱排水沟的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/
背景剪辑:填充盒;在使用背景时将是必要的，否则背景将流入透明边框区域。
