设置flexbox项之间距离的更好方法

为了设置flexbox项目之间的最小距离，我在.item上使用margin: 0 5px，在容器上使用margin: 0 -5px。对我来说，这似乎是一个黑客，但我找不到更好的方法来做到这一点。

#box {display: flex;width: 100px;margin: 0 -5px;}
.item {background: gray;width: 50px;height: 50px;margin: 0 5px;}
<div id='box'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>

2090454 次浏览
小开
最佳答案
  • Flexbox没有崩溃的边距。
  • Flexbox没有任何类似于border-spacing的表（编辑：CSS属性#1在较新的浏览器中满足此角色，我可以使用）

因此，实现你所要求的有点困难。

根据我的经验，不使用:first-child/:last-child并且在flex-wrap:wrap上没有任何修改的“最干净”的方法是在容器上设置padding:5px，在子级上设置margin:5px。这将在每个孩子之间以及每个孩子和他们的父母之间产生10px的差距。

演示

.upper {margin: 30px;display: flex;flex-direction: row;width: 300px;height: 80px;border: 1px red solid;
padding: 5px; /* this */}
.upper > div {flex: 1 1 auto;border: 1px red solid;text-align: center;
margin: 5px;  /* and that, will result in a 10px gap */}
.upper.mc /* multicol test */ {flex-direction: column;flex-wrap: wrap;width: 200px;height: 200px;}
<div class="upper"><div>aaa<br/>aaa</div><div>aaa</div><div>aaa<br/>aaa</div><div>aaa<br/>aaa<br/>aaa</div><div>aaa</div><div>aaa</div></div>
<div class="upper mc"><div>aaa<br/>aaa</div><div>aaa</div><div>aaa<br/>aaa</div><div>aaa<br/>aaa<br/>aaa</div><div>aaa</div><div>aaa</div></div>

小开

您可以使用透明边框。

我在尝试构建一个灵活的网格模型时考虑了这个问题，该模型可以回退到旧浏览器的表+表单元格模型。在我看来，列排水沟的边框是最好的选择。即表单元格没有边距。

e. g.

.column{border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 10px solid transparent;}

另请注意，您需要为flexbox提供min-width: 50px;。flex模型不会处理固定大小，除非您在您希望固定的特定子元素上执行flex: none;，因此不包括"flexi"。http://jsfiddle.net/GLpUp/4/但是所有列加上flex:none;不再是一个弹性模型。这里有一个更接近于flex模型的东西：http://jsfiddle.net/GLpUp/5/

因此，如果您不需要旧浏览器的table-cell回退，您实际上可以正常使用边距。http://jsfiddle.net/GLpUp/3/

使用背景时必须设置background-clip: padding-box;，否则背景将流入透明边框区域。

小开

我发现最简单的方法是使用百分比，只允许边距与您的宽度相匹配

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

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

这是否意味着你的价值观是基于宽度的，尽管这可能对每个人都不好。

小开

从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>
小开

这不是黑客。bootstrap和它的网格也使用了同样的技术，但是bootstrap使用填充来代替边距。

.row {margin:0 -15px;}.col-xx-xx {padding:0 15px;}
小开

我已经将其用于包装和固定宽度的列。这里的键是calc()

scss样本

$gap: 10px;
dl {display: flex;flex-wrap: wrap;padding: $gap/2;
dt, dd {margin: $gap/2;}
dt { // full width, acts as headerflex: 0 0 calc(100% - #{$gap});}
dd { // default grid: four columnsflex: 0 0 calc(25% - #{$gap});}
.half { // hall width columnsflex: 0 0 calc(50% - #{$gap});}
}

完整的代码样本

小开

我找到了一个基于通用兄弟选择器~的解决方案，并允许无限嵌套。

看到这个代码笔的工作示例

基本上，在列容器内，每个前面有另一个子级的子级都有一个上边距。同样，在每个行容器内，每个前面有另一个子级的子级都有一个左边距。

.box {display: flex;flex-grow: 1;flex-shrink: 1;}
.box.columns {flex-direction: row;}
.box.columns>.box~.box {margin-left: 5px;}
.box.rows {flex-direction: column;}
.box.rows>.box~.box {margin-top: 5px;}
<div class="box columns"><div class="box" style="background-color: red;"></div><div class="box rows"><div class="box rows"><div class="box" style="background-color: blue;"></div><div class="box" style="background-color: orange;"></div><div class="box columns"><div class="box" style="background-color: yellow;"></div><div class="box" style="background-color: pink;"></div></div></div><div class="box" style="background-color: green;"></div></div></div>

小开

带有-x（负）边距的flex容器和带有x（正）边距<强>或填充的弹性项目都导致所需的视觉结果：Flex项目彼此具有2倍的固定间隙。

这似乎只是一个偏好问题，是在flex项目上使用边距还是填充。

在此示例中，flex项动态缩放以保留固定间隙：

.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;}
小开

它不会在每种情况下都起作用，但是如果您有灵活的子宽度（%）并且知道每行的项目数量，您可以通过使用nth-child选择器/s非常干净地指定必要元素的边距。

这在很大程度上取决于你所说的“更好”是什么意思。这种方式不需要为子元素或负元素添加额外的包装标记-但这些东西都有它们的位置。

.container {align-content: flex-start;align-items: stretch;background-color: #ccc;display: flex;flex-flow: row wrap;justify-content: flex-start;width: 100%;}
.child-item {background-color: #c00;margin-bottom: 2%;min-height: 5em;width: 32%;}
.child-item:nth-child(3n-1) {margin-left: 2%;margin-right: 2%;}
<div class="container"><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>

小开

比方说，如果你想设置10px项之间的空间，你可以为所有项设置.item {margin-right:10px;}，并在最后一个项上重置它.item:last-child {margin-right:0;}

您还可以使用常规同级~或下一个+同级选择器在不包括第一个.item ~ .item {margin-left:10px;}的项目上设置左边距或使用.item:not(:last-child) {margin-right: 10px;}

Flexbox非常聪明，它可以自动重新计算并平均分配网格。

body {margin: 0;}
.container {display: flex;}
.item {flex: 1;background: gray;height: 50px;}
.item:not(:last-child) {margin-right: 10px;}
<div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>

如果要允许柔性包装，请参阅以下示例。

body {margin: 0;}
.container {display: flex;flex-wrap: wrap;margin-left: -10px;}
.item {flex: 0 0 calc(50% - 10px);background: gray;height: 50px;margin: 0 0 10px 10px;}
<div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>

小开

为什么不这样做：

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

这使用相邻同胞选择器，给所有.item元素，除了第一个margin-left。感谢flexbox，这甚至会产生同样宽的元素。这也可以用垂直定位的元素和margin-top来完成，当然。

小开

我发布了我的flexbox方法这里：

#请求参数

我拒绝的一个想法是用这样的东西从外部列中删除填充：

div:nth-child(#{$col-number}n+1) { padding-left: 0; }div:nth-child(#{$col-number}n+#{$col-number}) { padding-left: 0; }

但是，像这里的其他海报一样，我更喜欢负边距技巧。对于任何正在寻找基于Sass的解决方案的人来说，我的小提琴也具有响应能力。我基本上使用这种方法代替网格。

小开

支持多行的Flexbox和css calc

你好，下面是我为所有支持flexbox的浏览器提供的工作解决方案。没有负边距。

小提琴演示

.flexbox {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
.flexbox > div {/*1/3  - 3 columns per row10px - spacing between columns*/box-sizing: border-box;margin: 10px 10px 0 0;outline: 1px dotted red;width: calc(1/3*100% - (1 - 1/3)*10px);}
/*align last row columns to the left3n - 3 columns per row*/.flexbox > div:nth-child(3n) {margin-right: 0;}
.flexbox::after {content: '';flex: auto;}
/*remove top margin from first row-n+3 - 3 columns per row*/.flexbox > div:nth-child(-n+3) {margin-top: 0;}
<div class="flexbox"><div>col</div><div>col</div><div>col</div><div>col</div><div>col</div></div>

请注意，使用SASS可以缩短此代码

更新2020.II.11左边最后一行的对齐列

更新2020.II.14删除了最后一行的底部边缘

小开

之前也遇到过同样的问题，偶然想出了答案，希望对他人有帮助，可供参考。

长答案短，添加一个边框到你的孩子flex-项目。然后，您可以将flex项之间的边距指定为您喜欢的任何内容。在代码片段中，我使用黑色作为插图，如果你愿意，你可以使用“透明”。

#box {display: flex;width: 100px;/* margin: 0 -5px; *remove this*/}.item {background: gray;width: 50px;height: 50px;/* margin: 0 5px; *remove this*/border: 1px solid black; /* add this */}.item.special{ margin: 0 10px; }
<div id='box'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item special'></div></div>

小开

这是我的解决方案，不需要在子元素上设置任何类：

.flex-inline-row {display: inline-flex;flex-direction: row;}
.flex-inline-row.flex-spacing-4px > :not(:last-child) {margin-right: 4px;}

用法：

<div class="flex-inline-row flex-spacing-4px"><span>Testing</span><span>123</span></div>

除了上面给出的内联示例之外，相同的技术还可用于普通的flex行和列，并扩展了4px以外的行间距类。

小开 

#box {display: flex;width: 100px;}.item {background: gray;width: 50px;height: 50px;}/* u mean utility */.u-gap-10 > *:not(:last-child) {margin-right: 10px;}
<div id='box' class="u-gap-10"><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>

小开

这是一个使用灵活框完成行间距的卡片UI元素网格：

在此处输入图片描述

我对通过操纵结果不确定的填充和边距手动处理卡片感到沮丧。所以这是我发现非常有效的CSS属性组合：

.card-container {width: 100%;height: 900px;overflow-y: scroll;max-width: inherit;background-color: #ffffff;  
/*Here's the relevant flexbox stuff*/display: flex;flex-direction: row;justify-content: center;align-items: flex-start;flex-wrap: wrap;}
/*Supplementary styles for .card element*/.card {width: 120px;height: 120px;background-color: #ffeb3b;border-radius: 3px;margin: 20px 10px 20px 10px;}
<section class="card-container"><div class="card">
</div><div class="card">
</div><div class="card">
</div><div class="card">
</div></section>

希望这能帮助人们，现在和未来。

小开

在我的解决方案中使用Flexbox，我为父元素（容器）使用了justify-content属性，并在项目的flex-basis属性中指定了边距。检查下面的代码片段：

.container {display: flex;flex-flow: row wrap;justify-content: space-around;margin-bottom: 10px;}
.item {height: 50px;display: flex;justify-content: center;align-items: center;background-color: #999;}
.item-1-4 {flex-basis: calc(25% - 10px);}
.item-1-3 {flex-basis: calc(33.33333% - 10px);}
.item-1-2 {flex-basis: calc(50% - 10px);}
<div class="container"><div class="item item-1-4">1</div><div class="item item-1-4">2</div><div class="item item-1-4">3</div><div class="item item-1-4">4</div></div><div class="container"><div class="item item-1-3">1</div><div class="item item-1-3">2</div><div class="item item-1-3">3</div></div><div class="container"><div class="item item-1-2">1</div><div class="item item-1-2">2</div></div>

小开

Columbia nify-N列的独奏类

Flexbox和SCSS

.columnify {display: flex;
> * {flex: 1;
&:not(:first-child) {margin-left: 2rem;}}}

flexbox和css

.columnify {display: flex;}
.columnify > * {flex: 1;}
.columnify > *:not(:first-child) {margin-left: 2rem;}
<div class="columnify"><div style="display: inline-block; height: 20px; background-color: blue;"></div><div style="display: inline-block; height: 20px; background-color: blue"></div><div style="display: inline-block; height: 20px; background-color: blue"></div></div>

在JSFiddle上播放它。

小开

只需在选择器中使用.item + .item来匹配第二个.item

#box {display: inline-flex;margin: 0 -5px;}.item {background: gray;width: 10px;height: 50px;}
#box .item + .item {margin-left: 10px;}
<div id='box'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>

小开

tl； dr

$gutter: 8px;
.container {display: flex;justify-content: space-between;
.children {flex: 0 0 calc(33.3333% - $gutter);}}
小开

盒子容器上的负边距技巧效果很好。这是另一个例子，在订单、包装等方面效果很好。

.container {border: 1px solid green;width: 200px;display: inline-block;}
#box {display: flex;flex-wrap: wrap-reverse;margin: -10px;border: 1px solid red;}.item {flex: 1 1 auto;order: 1;background: gray;width: 50px;height: 50px;margin: 10px;border: 1px solid blue;}.first {order: 0;}
<div class=container><div id='box'><div class='item'>1</div><div class='item'>2</div><div class='item first'>3*</div><div class='item'>4</div><div class='item'>5</div></div></div>

小开

您可以使用& > * + *作为选择器来模拟flex-gap（对于单行）：

#box { display: flex; width: 230px; outline: 1px solid blue; }.item { background: gray; width: 50px; height: 100px; }
/* ----- Flexbox gap: ----- */
#box > * + * {margin-left: 10px;}
<div id='box'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>

如果您需要支持柔性包装，您可以使用包装器元素：

.flex { display: flex; flex-wrap: wrap;  }.box { background: gray; height: 100px; min-width: 100px; flex: auto; }.flex-wrapper {outline: 1px solid red; }
/* ----- Flex gap 10px: ----- */
.flex > * {margin: 5px;}.flex {margin: -5px;}.flex-wrapper {width: 400px; /* optional */overflow: hidden; /* optional */}
<div class='flex-wrapper'><div class='flex'><div class='box'></div><div class='box'></div><div class='box'></div><div class='box'></div><div class='box'></div></div></div>

小开

使用flexbox，创建排水沟是一种痛苦，尤其是在涉及包装时。

您需要使用负边距（如问题所示）：

#box {display: flex;width: 100px;margin: 0 -5px;}

…或更改超文本标记语言（如另一个答案所示）：

<div class='flex-wrapper'><div class='flex'><div class='box'></div><div class='box'></div>...</div></div>

…或者别的什么。

无论如何，你需要一个丑陋的黑客来使它工作，因为flexbox不提供“flex-gap”功能（至少现在是这样）.

但是，使用CSS Grid Layout，排水沟的问题很简单。

Grid规范提供了在网格项之间创建空间的属性，同时忽略项与容器之间的空间。这些属性是：

  • grid-column-gap
  • grid-row-gap
  • grid-gap（上面两个属性的简写）

最近，规范已经更新以符合CSS框对齐模块，它提供了一组对齐属性，供所有盒子模型使用。所以现在的属性是：

  • column-gap
  • row-gap
  • gap（速记）

但是，并非所有支持网格的浏览器都支持较新的属性，因此我将在下面的演示中使用原始版本。

此外，如果项和容器之间需要行间距，容器上的padding可以正常工作（请参阅下面演示中的第三个示例）。

从规范：

10.1。排水沟：row-gap、column-gap和gap属性

row-gap和column-gap属性（及其gap速记），在网格容器上指定时，定义网格之间的排水沟行和网格列。它们的语法定义在CSS框对齐3§8盒子之间的间隙

这些属性的效果就像受影响的网格线一样获取厚度：两条网格线之间的网格轨道是空间在代表他们的排水沟之间。

.box {display: inline-grid;grid-auto-rows: 50px;grid-template-columns: repeat(4, 50px);border: 1px solid black;}
.one {grid-column-gap: 5px;}
.two {grid-column-gap: 10px;grid-row-gap: 10px;}
.three {grid-gap: 10px;padding: 10px;}
.item {background: lightgray;}
<div class='box one'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>
<hr>
<div class='box two'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>
<hr>
<div class='box three'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>

更多信息：

小开

此解决方案适用于所有情况，即使有多行或任意数量的元素。但是节的计数应该相同-您希望第一行为4，第二行为3-它不会这样工作，第四个内容的空间将是空白，容器不会填充。

我们使用#0及其属性。

#box {display: grid;width: 100px;grid-gap: 5px;/* Space between items */grid-template-columns: repeat(4,1fr);/* Decide the number of columns(4) and size(1fr | 1 Fraction | you can use pixels and other values also) */}
.item {background: gray;width: 100%;/* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */height: 50px;}
<div id='box'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>

此方法的缺点是在MobileOpera Mini中不支持，并且在PC中仅在IE10之后才起作用。

完整的浏览器兼容性，包括IE11，请使用Autopre修复器

老答案不要认为它是一个旧的解决方案，如果你只想要单行元素，它仍然是最好的解决方案之一，并且它可以与所有浏览器一起使用。

此方法由CSS兄弟组合使用，因此您也可以以许多其他方式操作它，但如果您的组合错误，它也可能导致问题。

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

下面的代码可以做到这一点。在这个方法中，不需要给#1包装器#0。

为您提供的工作示例：

#box {display: flex;width: 100px;}.item {background: gray;width: 22px;height: 50px;}.item+.item{margin-left: 5px;}
<div id='box'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>

小开

更新：所有现代浏览器现在都支持flexbox的gap（Edge/Chrome /Opera/SamsungInternet/Safari /Firefox）

最终他们会将gap属性添加到flexbox。在那之前，您可以使用CSS网格代替它已经有gap属性，并且只有一行。比处理边距更好。

小开 

 :root{--inner: 20px;--gap: 10px; /* same as gutter */  
/* flex-flow in row---------------------*/--row-wrap: row wrap;--row-nowrap: row nowrap;  
/* flex-flow in col---------------------*/--col-wrap: column wrap;}  
.row {display: flex;flex-direction: var(--flex-row);}/* additional wrapping classes (if needed)-------------------------------------------*/.nowrap {display: flex;flex-flow: var(--row-nowrap);}.wrap {display: flex;flex-flow: var(--col-wrap);}/*----------------------------------------*/[class*="col-"] {border: 1px solid #ccc;margin: var(--gap);padding: var(--inner);height: auto;background: #333;flex: 1 0 auto;}.col-3 {flex: 3;}
<div class="row"><div class='col-3'></div><div class='col-3'></div><div class='col-3'></div><div class='col-3'></div></div>

您也可以查看此示例。

小开

我找到了一个黑客，因为我真的需要这个我自己。

/* grid */.container {display: flex;flex-flow: row wrap;justify-content: space-between;}
.container::after, /* this makes sure odd element goes left and not space between */.item {content:"";width: calc(33.3333% - 20px);margin-bottom: 40px;}
/* extra styling - not important */.item {height: 100px;background: #787878;}
<div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>

这是一个带有漂亮的flex增长类别的后网格。我想你会喜欢的。见coDepen

小开

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

例如：

#box {display: flex;width: 100px;border: 1px red solid;}
.item {background: gray;width: 10px;height: 100px;flex: 1 1 auto;}
.item:not(:last-child) {margin-right: 5px;}
<div id='box'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>

小开

我经常在这种情况下使用+运算符

#box {display: flex;width: 100px;}.item {background: gray;width: 50px;height: 50px;}.item + .item {margin-left: 5px;}
<div id='box'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>

小开

假设：

  • 您想要带有包装的4列网格布局
  • 项目的数量不一定是4的倍数

除第1、第5、第9项外，在每个项目上设置左边距；并在每个项目上设置固定宽度。如果左边距为10px，则每行4项之间将有30px的边距，项目的百分比宽度可以计算如下：

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

对于涉及最后一行flexbox的问题，这是一个不错的解决方法。

.flex {display: flex;flex-direction: row;flex-wrap: wrap;margin: 1em 0;background-color: peachpuff;}
.item {margin-left: 10px;border: 1px solid;padding: 10px;width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);background-color: papayawhip;}
.item:nth-child(4n + 1) {margin-left: 0;}
.item:nth-child(n + 5) {margin-top: 10px;}
<div class="flex"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div><div class="flex"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div><div class="flex"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div></div>

小开

我仅在其容器稳定的方向上设置flx项目的行间距。例如。如果一个flex容器设置为从左到右流动（flex-direction:row），我将只在其子级设置对边距，除了最后一个：

.flex-lr{display:flex;flex-direction:row;}
.flex-lr > *:not(:last-child){margin-right:5px;}

乍一看，这似乎是可行的，但等等！当justify-content设置为start或end以外的值时，不应该这样做，因为所有其他值都已经在自己分配空间。

如果项目包装怎么办？那么我们也应该在适当的十字轴侧添加空间。但是，如何知道容器是否允许其子级包装？wrap-reverse呢？

所有这些考虑使我认为这不是一项微不足道的任务，它需要超越一小步。

我的方法基于构建一组充当flexbox包装器的简短类。这有一些好处：

  1. 它允许将所有供应商前缀“集中”在一个点上，然后忘记这一点。
  2. 它允许将flexbox属性分组到单个类中，甚至重命名flexbox使用的一些措辞，有时可能看起来不太直观（IMHO）。
  3. 如果我使用这些类，我将能够根据它们所依赖的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>

这就是我所说的大声代码。

小开

确实有一个很好的、整洁的、仅限CSS的方法来做到这一点（人们可能会认为“更好”）。

在这里发布的所有答案中，我只找到一个成功使用calc（）的答案（由Dariusz Sikorski提出）。但是当遇到：“但如果最后一行中只有2项，则会失败”时，没有扩展解决方案。

这个解决方案解决了OP的问题，替代了负利润，并解决了向Dariusz提出的问题。

备注：

  • 此示例仅演示3列布局
  • 它使用calc()让浏览器按照它想要的方式进行数学运算--100%/3（虽然33.3333%也应该工作）和(1em/3)*2（虽然.66em也应该工作得很好）.
  • 如果元素少于列，则使用::after填充最后一行

.flex-container {display: flex;justify-content: space-between;flex-wrap: wrap;}.flex-container:after {content: "";}.flex-container > div,.flex-container:after {box-sizing: border-box;width: calc((100%/3) - ((1em/3)*2));}.flex-container > :nth-child(n + 4) {margin-top: 1em;}
/* the following is just to visualize the items */.flex-container > div,.flex-container:after {font-size: 2em;}.flex-container {margin-bottom:4em;}.flex-container > div {text-align: center;background-color: #aaa;padding: 1em;}.flex-container:after {border: 1px dashed red;}
<h2>Example 1 (2 elements)</h2><div class="flex-container"><div>1</div><div>2</div></div>
<h2>Example 2 (3 elements)</h2><div class="flex-container"><div>1</div><div>2</div><div>3</div></div>

也在https://codepen.io/anon/pen/rqWagE

小开

好吧，关于你的CSS，imo，最简单的解决方案，在超文本标记语言中添加间隔：

<div id='box'><div class='item'></div><div style='width: 5px;'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>

因此，您可以使用内联样式或类名来控制它。有时，也可以用填充来做行间距。

这是一个例子

好的，现在你有一个gap，所以你可以使用它，但是好的老技术仍然是不可避免的，比如<div><div></div></div>包装来构建具有独特间隙的独特项目（使用填充进行间隙！和ofc newgap属性）

小开

我使用了另一种方法。在容器上使用负边距，这需要与每个子级相同，例如10px。然后使用calc（）将每个子级的宽度减少总边距，在本例中为20px。

举个例子：https://codepen.io/anon/pen/KJLZVg

这有助于响应式地做事，因为您不需要针对特定的第n个孩子来在容器包装时保持容器两侧的齐平。 

.parent {padding: 0 10px;}.container {display: flex;margin: 0 -10px;flex-wrap: wrap;width: 100%;max-width: 500px;margin: 0 auto;}.child {margin: 0 10px 25px 10px;flex: 0 0 calc(25% - 20px);height: 40px;background: red;}
<div class="parent"><div class="container"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div></div>

也使用flex： 0 0（宽度）它有助于IE浏览器。

小开

执行此操作的简单方法是将边距左和边距右添加到子div并相应地调整边距值

<div class="a"><div class="b"></div><div class="b"></div><div class="b"></div></div>

css：

.a{display: flex;justify-content: center;background-color: black;}
.b{height: 25px;width: 25px;background-color: grey;margin-left: 5px;margin-right: 5px;}
小开

CSSgap属性：

有一个新的#0 CSS属性用于多列，flexbox和网格布局，现在可以在较新的浏览器中使用！（请参阅我可以使用链接1；链接2）。它是row-gap和column-gap的简写。

#box {display: flex;gap: 10px;}

CSSrow-gap属性：

flexbox和网格布局的#0 CSS属性允许您在行之间创建间隙。

#box {display: flex;row-gap: 10px;}

CSScolumn-gap属性：

多列、flexbox和网格布局的#0 CSS属性允许您在列之间创建间隙。

#box {display: flex;column-gap: 10px;}

示例：

#box {display: flex;flex-wrap: wrap;width: 200px;background-color: red;gap: 10px;}.item {background: gray;width: 50px;height: 50px;border: 1px black solid;}
<div id='box'><div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div></div>

小开

根据#ChromeDevSummit，在Firefox和基于Chromium的浏览器中有Flexbox的gap属性的实现。

这是一个直播演示

小开

您可以使用新属性gap。我复制粘贴我在这个文章中找到的解释，以及更多信息

CSS网格布局使用Gap（以前称为Grid-Gap）已经有一段时间了。通过指定包含元素的内部行间距而不是子元素周围的行间距，Gap解决了许多常见的布局问题。例如，使用Gap，你不必担心子元素的边距会在包含元素的边缘周围造成不需要的空白：

不幸的是，目前只有FireFox支持灵活布局的差距。

@use postcss-preset-env {stage: 0;browsers: last 2 versions}
section {width: 30vw;  
display: grid;gap: 1rem;grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));  
&[flex] {display: flex;flex-wrap: wrap;}  
margin-bottom: 3rem;}
.tag {color: white;background: hsl(265 100% 47%);padding: .5rem 1rem;border-radius: 1rem;}
button {display: inline-flex;place-items: center;gap: .5rem;background: hsl(265 100% 47%);border: 1px solid hsl(265 100% 67%);color: white;padding: 1rem 2rem;border-radius: 1rem;font-size: 1.25rem;}
body {min-height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;}
<section><h1>Grid</h1><div class="tag">Awesome</div><div class="tag">Coo</div><div class="tag">Rad</div><div class="tag">Math</div></section><br><section flex><h1>Flex</h1><div class="tag">Awesome</div><div class="tag">Coo</div><div class="tag">Rad</div><div class="tag">Math</div></section>

小开

您可以使用以下等式

.container {max-width: 960px;margin: 0 auto;padding: 4rem 0;}
.flex {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;}.flex:after {content: "";max-width: calc(100% * var(--col) / 12 - var(--gap));width: 100%;}@media (max-width: 960px) {.flex:after {max-width: calc(100% * var(--colTablet) / 12 - var(--gap));}}@media (max-width: 680px) {.flex:after {max-width: calc(100% * var(--colMobile) / 12 - var(--gap));}}.flex .item {max-width: calc(100% * var(--col) / 12 - var(--gap));width: 100%;}@media (max-width: 960px) {.flex .item {max-width: calc(100% * var(--colTablet) / 12 - var(--gap));margin-bottom: 1rem;}.flex .item:last-child {margin-bottom: unset;}}@media (max-width: 680px) {.flex .item {max-width: calc(100% * var(--colMobile) / 12);}}.flex .item .card {background: #eee;text-align: center;padding: 2rem;}
<div class="flex container" style="--col: 3; --colTablet: 6; --colMobile: 12; --gap: 2%"><div class="item" style="--col: 3; --colTablet: 6; --colMobile: 12; --gap: 2%"><div class="card"><h2>Hello world</h2></div></div><div class="item" style="--col: 3; --colTablet: 6; --colMobile: 12; --gap: 2%"><div class="card"><h2>Hello world</h2></div></div><div class="item" style="--col: 3; --colTablet: 6; --colMobile: 12; --gap: 2%"><div class="card"><h2>Hello world</h2></div></div></div>


提交答案