这种解决方案适用于所有情况，即使有多行或任意数量的元素。但是section的计数应该是一样的，你想在第一行有4个，第二行有3个，这样不行，第4个内容的空间将是空白的，容器不会填充。

我们使用display: grid;以及它的性质。

#箱{ 显示:网格; 宽度:100 px; grid-gap: 5 px; /*项目之间的空格*/ grid-template-columns:重复(4 1 fr); /*决定列的数量(4)和大小(1fr | 1分数|你也可以使用像素和其他值)*/ ｝ .item { 背景:灰色; 宽度:100%; /* width是没有必要的，只是添加这个来理解width工作为网格模板分配空间的100%**默认宽度将是100%** */ 高度:50 px; ｝ < div id =“盒子”> < 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 >

这种方法的缺点是在移动Opera Mini将不被支持，在PC上只有在IE10之后才能工作。

注意，完整的浏览器兼容性包括IE11，请使用Autoprefixer

旧的答案 不要认为它是一个旧的解决方案，如果你只想要单行元素，它仍然是最好的解决方案之一，它可以在所有浏览器上工作。

这个方法是由CSS兄弟姐妹组合使用的，所以你也可以用许多其他的方式来操作它，但如果你的组合是错误的，它也可能会导致问题。

.item+.item{
  margin-left: 5px;
}

下面的代码将完成这个任务。在这种方法中，不需要给出margin: 0 -5px;到#box包装器。

为您提供一个工作示例:

#箱{ 显示:flex; 宽度:100 px; ｝ .item { 背景:灰色; 宽度:22 px; 高度:50 px; ｝ .item + .item { margin-left: 5 px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

你可以试试CSS3的:not选择器

Eg:

#箱{ 显示:flex; 宽度:100 px; 边框:1px红色实体; ｝ .item { 背景:灰色; 宽度:10 px; 身高:100 px; Flex: 1台自动; ｝ .item:没有(胎){ margin-right: 5 px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

这并不适用于所有情况，但如果你有灵活的子宽度(%)，并且知道每行有多少项，你可以通过使用n -child selector/s非常清楚地指定必要元素的边距。

这很大程度上取决于你对“更好”的定义。这种方法不需要为子元素或负元素添加额外的包装器标记——但它们都有自己的位置。

.container { align-content: flex-start; 对齐项目:伸展; background - color: # ccc; 显示:flex; Flex-flow:行换行; justify-content: flex-start; 宽度:100%; ｝ .child-item { background - color: # c00; margin-bottom: 2%; 最小高度:5 em; 宽度:32%; ｝ .child-item: nth-child (3 n - 1) { margin-left: 2%; margin-right: 2%; ｝ < div class = "容器" > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < / div >

为什么不这样做呢:

.item + .item {
    margin-left: 5px;
}

它使用相邻的兄弟选择器，为所有.item元素赋值，除了第一个元素左距。多亏了flexbox，这甚至导致了同样宽的元素。当然，这也可以通过垂直定位的元素和margin-top来实现。

你可以使用& > * + *作为选择器来模拟一个弹性间距(对于单行):

#box{显示:flex;宽度:230 px;轮廓:1px纯蓝色;｝ .item{背景:灰色;宽度:50 px;身高:100 px;｝ /* ----- Flexbox gap: ----- */ #box > * + * { margin-left: 10 px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

如果你需要支持伸缩包装，你可以使用wrapper元素:

.flex{显示:flex;flex-wrap:包装;｝ .box{背景:灰色;身高:100 px;min-width: 100 px;flex:汽车;｝ .flex包装{轮廓:1px固体红色;｝ /* -----伸缩间隙10px: ----- */ .flex > * { 保证金:5 px; ｝ .flex { 保证金:5 px; ｝ .flex-wrapper { 宽度:400 px;/* optional */ 溢出:隐藏;/* optional */ ｝ < div class = ' flex-wrapper ' > < div class = ' flex ' > < div class = '盒子' > < / div > < div class = '盒子' > < / div > < div class = '盒子' > < / div > < div class = '盒子' > < / div > < div class = '盒子' > < / 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 > < / >节

希望这对现在和未来的人们有所帮助。