盒子容器上的负边距技巧效果很好。这是另一个例子，工作的秩序，包装和什么不。

.container { 边框:1px纯绿色; 宽度:200 px; 显示:inline-block; ｝ #箱{ 显示:flex; flex-wrap: wrap-reverse; 保证金:-10 px; 边框:1px纯红色; ｝ .item { Flex: 1台自动; 顺序:1; 背景:灰色; 宽度:50 px; 高度:50 px; 保证金:10 px; 边框:1px纯蓝色; ｝ 当代{ 秩序:0; ｝ < div class =容器> < div id =“盒子”> < div class = '物品' > 1 < / div > < div class = '物品' > < / div > 2 <div class='item first'>3*</div> 4 < div class = '物品' > < / div > < div class = '物品' > < / div > 5 < / div > < / div >

比如说，如果你想在项目之间设置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 >

我发现最简单的方法就是用百分比来计算，然后让页边距来计算宽度

这意味着如果你使用你的例子，你最终会得到这样的结果

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

这意味着你的值是基于宽度的，虽然这可能对每个人都不好。

你可以利用新的房产缺口。我复制粘贴了我在本文中找到的解释，以及更多的信息

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 >数学 < / >节

你可以用下面的方程

.container { max-width: 960 px; 保证金:0自动; 填充:4rem 0; ｝ .flex { 显示:flex; 对齐项目:中心; justify-content:之间的空间; flex-wrap:包装; ｝ .flex:{后 内容:“”; max-width:钙(100% * var(——坳)/ 12 - var(差距)); 宽度:100%; ｝ @media (max-width: 960px) { .flex:{后 max-width: calc(100% * var(——colTablet) / 12 - var(——gap)); ｝ ｝ @media (max-width: 680px) { .flex:{后 max-width: calc(100% * var(——colMobile) / 12 - var(——gap)); ｝ ｝ .flex .item { max-width:钙(100% * var(——坳)/ 12 - var(差距)); 宽度:100%; ｝ @media (max-width: 960px) { .flex .item { max-width: calc(100% * var(——colTablet) / 12 - var(——gap)); margin-bottom: 1快速眼动; ｝ .flex .item:last child { margin-bottom:设置; ｝ ｝ @media (max-width: 680px) { .flex .item { max-width: calc(100% * var(——colMobile) / 12); ｝ ｝ .flex .item .card { 背景:# eee; text-align:中心; 填充:2快速眼动; ｝ <div class="flex container" style="——col: 3;——colTablet: 6;——colMobile: 12个;——差距:2%”> <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > < / div >

为什么不这样做呢:

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

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