要设置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 > < / >节
希望这对现在和未来的人们有所帮助。
其他回答
Flexbox和css计算与多行支持
你好，下面是我的工作解决方案，所有浏览器支持flexbox。没有负边距。
小提琴演示
.flexbox { 显示:flex; flex-direction:行; flex-wrap:包装; justify-content:之间的空间; ｝ .flexbox > div { ／* 每行1/3 - 3列 10px -列之间的间距 * / box-sizing: border-box; Margin: 10px 10px 0 0; 轮廓:1px虚线红色; 宽度:calc(1/3*100% - (1 - 1/3)*10px; ｝ ／* 将最后一行列向左对齐 3n -每行3列 * / .flexbox > div:n -child(3n) { margin-right: 0; ｝ {后.flexbox:: 内容:”; flex:汽车; ｝ ／* 删除第一行的上边距 -n+3 -每行3列 * / .flexbox > div:n -child(-n+3) { margin-top: 0; ｝ < div class = " flexbox”> < div >坳< / div > < div >坳< / div > < div >坳< / div > < div >坳< / div > < div >坳< / div > < / div >
请注意，使用SASS可以使这段代码更短
更新2020. ii.11 在最后一行向左对齐的列
更新2020. ii.14 移除了最后一行的margin-bottom
使用flexbox，创建排水沟是一种痛苦，特别是当涉及到包装时。
你需要使用负边距(如问题所示):
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
．.． 或更改HTML(如另一个答案所示):
<div class='flex-wrapper'>
<div class='flex'>
<div class='box'></div>
<div class='box'></div>
...
</div>
</div>
．.． 或者别的什么。
在任何情况下，你都需要一个丑陋的黑客来让它工作，因为flexbox不提供“弹性间隙”功能 (至少现在是这样)。
水槽的问题，然而，是简单和容易的CSS网格布局。
Grid规范提供了在网格项之间创建空间的属性，而忽略项和容器之间的空间。这些属性是:
grid-column-gap grid-row-gap 网格间隙(以上两个属性的简写)
最近，该规范已经更新，以符合CSS框对齐模块，它提供了一组用于所有框模型的对齐属性。属性现在是:
纵队间隔 row-gap 差距(简写)
然而，并不是所有支持grid的浏览器都支持更新的属性，所以我将在下面的演示中使用原始版本。
同样，如果项目和容器之间需要空格，容器上的填充就可以了(请参阅下面演示中的第三个示例)。
来自规范:
10.1. 排水沟:行隙、列隙、隙 属性 行间隙和列间隙属性(以及它们的间隙简写)， 当在网格容器上指定时，定义网格之间的水槽 行和网格列。它们的语法在CSS框对齐3中定义 §8箱子之间的空隙。 这些属性的效果就像受影响的网格线一样 获取厚度:两条网格线之间的网格轨迹就是空间 在代表他们的排水沟之间。
.box { 显示:inline-grid; grid-auto-rows: 50 px; Grid-template-columns:重复(4,50px); 边框:1px纯黑色; ｝ 。{ grid-column-gap: 5 px; ｝ :({ grid-column-gap: 10 px; grid-row-gap: 10 px; ｝ .three { grid-gap: 10 px; 填充:10 px; ｝ .item { 背景:浅灰色; ｝ <div class='box one'> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div > <人力资源> <div class='box two'> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div > <人力资源> <div class='box 3 '> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >
更多信息:
浏览器对CSS网格的支持 更容易定义只应用于伸缩项之间的页边距(讨论) flexbox项目之间的间距
你可以利用新的房产缺口。我复制粘贴了我在本文中找到的解释，以及更多的信息
CSS的网格布局有差距(以前的网格差距)有一段时间了。通过指定包含元素的内部间距而不是子元素周围的间距，gap解决了许多常见的布局问题。例如，使用gap，你不必担心子元素的边距会在包含元素的边缘造成不必要的空白:
不幸的是，目前只有FireFox支持flex布局中的gap。
@use postcss-preset-env { 阶段:0; 浏览器:最近2个版本 ｝ 节{ 宽度:30大众; 显示:网格; 差距:1快速眼动; Grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr)); & (flex) { 显示:flex; flex-wrap:包装; ｝ margin-bottom: 3快速眼动; ｝ .tag { 颜色:白色; 背景:hsl(265 100% 47%); 填充:.5rem 1rem; border - radius: 1快速眼动; ｝ 按钮{ 显示:inline-flex; 名:中心; 差距:.5rem; 背景:hsl(265 100% 47%); 边框:1px固体hsl(265 100% 67%); 颜色:白色; 填充:1rem 2rem; border - radius: 1快速眼动; 字体大小:1.25快速眼动; ｝ 身体{ 最小高度:100 vh; 显示:flex; flex-direction:列; justify-content:中心; 对齐项目:中心; ｝ < >节 <标题> < / h1 >网格 < div class = "标签" >的< / div > < div class = "标签" >首席运营官< / div > < div class = "标签" > Rad < / div > < div class = "标签" > < / div >数学 < / >节 < br > < flex节> <标题> Flex h1 > < / < div class = "标签" >的< / div > < div class = "标签" >首席运营官< / div > < div class = "标签" > Rad < / div > < div class = "标签" > < / div >数学 < / >节
我只在伸缩项目的容器建立的方向上设置间距。 例如，如果一个flex容器被设置为从左向右流动(flex-direction:row)，我将只在它的子容器上设置右边缘，除了最后一个:
.flex-lr{
display:flex;
flex-direction:row;
}
.flex-lr > *:not(:last-child){
margin-right:5px;
}
乍一看，这似乎是可行的，但等等!当justify-content被设置为开始或结束值时，不应该这样做，因为所有其他值已经自己分布空间了。
如果包裹好了呢?然后，我们应该在适当的交叉轴侧加上空间。但是，如何知道容器是否允许其子容器进行包装呢?那么换行-反转呢?
所有这些考虑让我觉得这不是一件小事，需要再往前迈一小步。
我的方法基于构建一组简短的类，这些类充当flexbox的包装器。这有一些好处:
它允许将所有供应商前缀“集中”在一个点上，并忘记这一点。 它允许将flexbox属性分组到单个类中，甚至可以重命名flexbox使用的一些措辞，这有时可能看起来不太直观(恕我直言)。 如果我使用这些类，我将能够根据它们所依赖的flex属性值编写其他类。例如，我将能够根据流动方向，交叉轴对齐，包装等设置间距。
我最终创建了一个flexbox设计器来处理所有这些问题，以帮助我自己(和其他人)了解flexbox是如何工作的，并意识到flexbox是多么棒。 请随意使用下面的链接:
http://algid.com/Flex-Designer
因此，下面你会发现我使用的类的抽象和一个流方向的间距(边缘)实用程序。你可以从上面提供的链接中推断出其他的或找到它们。为简洁起见，省略了供应商前缀。
/* Flex container definition */
.flex-lr{display:flex; flex-direction:row;}
.flex-tb{display:flex; flex-direction:column;}
.flex-rl{display:flex; flex-direction:row-reverse;}
.flex-bt{display:flex; flex-direction:column-reverse;}
/* Wrapping */
.wrap{flex-wrap:wrap;}
.nowrap{flex-wrap:nowrap;}
.wrap-rev{flex-wrap:wrap-reverse;}
/* Main axis alignment */
.align-start{justify-content:flex-start;}
.align-end{justify-content:flex-end;}
.align-center{justify-content:center;}
.align-between{justify-content:space-between;}
.align-around{justify-content:space-around;}
.align-evenly{justify-content:space-evenly;}
/* Cross axis alignment */
.cross-align-start{align-items:flex-start;}
.cross-align-end{align-items:flex-end;}
.cross-align-center{align-items:center;}
.cross-align-stretch{align-items:stretch;}
.cross-align-baseline{align-items:baseline;}
/* Cross axis alignment when content is wrapped */
.wrap-align-start{align-content:flex-start;}
.wrap-align-end{align-content:flex-end;}
.wrap-align-center{align-content:center;}
.wrap-align-stretch{align-content:stretch;}
.wrap-align-between{align-content:space-between;}
.wrap-align-around{align-content:space-around;}
/* Item alignment */
.item-cross-align-start{align-self:flex-start;}
.item-cross-align-end{align-self:flex-end;}
.item-cross-align-center{align-self:center;}
.item-cross-align-stretch{align-self:stretch;}
.item-cross-align-baseline{align-self:baseline;}
.item-cross-align-auto{align-self:auto;}
现在是把我们带到这里的东西:项目之间的空间:
/* Flow margin (left to right) */
.flex-lr.fm-0 > *:not(:last-child){margin-right:0;}
.flex-lr.fm-1 > *:not(:last-child){margin-right:3px;}
.flex-lr.fm-2 > *:not(:last-child){margin-right:7px;}
.flex-lr.fm-3 > *:not(:last-child){margin-right:15px;}
.flex-lr.fm-4 > *:not(:last-child){margin-right:32px;}
/* Cross axis */
.flex-lr.wrap.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-bottom:0;}
.flex-lr.wrap.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-bottom:3px;}
.flex-lr.wrap.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-bottom:7px;}
.flex-lr.wrap.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-bottom:15px;}
.flex-lr.wrap.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-bottom:32px;}
/* wrap reverse */
.flex-lr.wrap-rev.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-top:0;}
.flex-lr.wrap-rev.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-top:3px;}
.flex-lr.wrap-rev.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-top:7px;}
.flex-lr.wrap-rev.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-top:15px;}
.flex-lr.wrap-rev.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-top:32px;}
最后，这是标记的样子:
<div class="flex-lr cross-align-center fm-3">
<div>
Some content here...
</div>
<div>
A bit more stuff here...
</div>
<div class="flex-tb fm-3">
<div>
Now vertical content
</div>
<div>
etc.
</div>
</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 > < / >节
希望这对现在和未来的人们有所帮助。
