关于CSS：设置Flexbox项目之间距离的更好方法


Better way to set distance between flexbox items

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

例

1
2
3
4
5
6
7
8
9
10
11
#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}
1
 

相关讨论

  • Flexbox的利润率没有下降。
  • 对于表，Flexbox没有类似于border-spacing的任何东西(除了CSS属性gap，大多数浏览器都无法很好地支持CSS属性)

因此，实现您的要求会有点困难。

以我的经验，不使用:first-child / :last-child并且对flex-wrap:wrap进行任何修改的"最干净"方式是在容器上设置padding:5px，在子级上设置margin:5px。这将在每个孩子之间以及每个孩子与其父母之间产生10px差距。

演示版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  aaa<br/>aaa
  aaa
  aaa<br/>aaa
  aaa<br/>aaa<br/>aaa
  aaa
  aaa



  aaa<br/>aaa
  aaa
  aaa<br/>aaa
  aaa<br/>aaa<br/>aaa
  aaa
  aaa

相关讨论

这不是黑客。
引导程序及其网格也使用了相同的技术，尽管引导程序使用填充作为其cols来代替空白。

1
2
3
4
5
6
.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}
相关讨论

flexbox和CSS calc()

您好，以下是适用于所有支持flexbox的浏览器的工作解决方案。没有负利润，没有黑客，没有变通办法，纯CSS。

小提琴演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns
  */
  box-sizing: border-box;
  margin-bottom: 10px;
  outline: 1px dotted red;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}
1
2
3
4
5
6
  col
  col
  col
  col
  col
  col

相关讨论

您可以使用透明边框。

我在尝试构建Flex网格模型时曾考虑过这个问题，该模型可以回退到旧浏览器的table + table-cell模型。在我看来，用于装订线槽的边框是最佳的选择。即表格单元格没有边距。

例如

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

另请注意，您需要min-width: 50px;用于flexbox。除非您对要固定的特定子元素执行flex: none;，否则flex模型将不处理固定大小，因此将其排除为"flexi"。 http://jsfiddle.net/GLpUp/4/
但是所有列以及flex:none;不再是flex模型。
这是更接近flex模型的内容：http://jsfiddle.net/GLpUp/5/

因此，如果您不需要旧版浏览器的表格单元回退，则实际上可以正常使用页边距。 http://jsfiddle.net/GLpUp/3/

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

相关讨论

即使存在多行或任意数量的元素，此方法也适用于所有情况。

我们正在使用display: grid;及其属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Decide the number of columns and size */
}

.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;
}
1
 

此方法的缺点是将不支持Mobile Opera Mini，而在PC中，此方法仅在IE10之后可用。

有关包括IE11在内的完整浏览器兼容性的说明，请使用Autoprefixer

老答案

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

CSS兄弟组合使用此方法，因此您也可以用许多其他方式进行操作，但是如果组合错误，也可能会引起问题。

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

下面的代码将解决问题。在此方法中，无需将margin: 0 -5px;赋予#box包装器。

适合您的工作示例：

1
2
3
4
5
6
7
8
9
10
11
12
#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 22px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}
1
 

相关讨论

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

1
2
3
4
5
6
7
8
#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}
1
 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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 */
}
1
 

假设您要在项目之间设置10px间隔，则只需为所有内容设置.item {margin-right:10px;}，然后在最后一个.item:last-child {margin-right:0;}上重置它即可

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
  margin: 0;
}

.container {
  display: flex;
}

.item {
  flex: 1;
  background: gray;
  height: 50px;
}

.item:not(:last-child) {
  margin-right: 10px;
}
1
 

如果要允许弹性换行，请参见以下示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}
1
 

相关讨论

我发现了一个基于通用同级选择器~的解决方案，并且允许无限嵌套。

有关实际示例，请参见此代码笔

基本上，在列容器中，每个子项之前都有另一个子项会获得最高利润。同样，在每个行容器中，每个子项之前的另一个子项都有一个左边距。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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;
}
1
 

相关讨论

从sawa的答案继续，这是一个略有改进的版本，可让您在项目之间设置固定的间距而没有周围的空白。

http://jsfiddle.net/chris00/s52wmgtq/49/

还包括Safari的" -webkit-flex"版本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.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;
}


   
       
            text
            text
            text
            text
            text
            text
相关讨论

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

SCSS样本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

完整的Codepen样本

相关讨论

具有-x(负)页边距的flex容器和具有x(正)页边距或填充的flex项均会产生所需的视觉效果：Flex项之间的固定间距仅为2x。

无论是在弹性项目上使用边距还是填充，这似乎只是一个优先事项。

在此示例中，为了保持固定的间隔，对伸缩项进行了动态缩放：

1
2
3
4
5
6
7
8
9
10
11
.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;
}
相关讨论

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

相关讨论

使用flexbox时，创建装订线很麻烦，尤其是在涉及包装时。

您需要使用负边距(如问题所示)：

1
2
3
4
5
#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

...或更改HTML(如另一个答案所示)：

1
            ...

... 或者是其他东西。

无论如何，您都需要一个丑陋的技巧来使其工作，因为flexbox不提供" flex-gap"功能
(至少现在(是)。

但是，使用CSS Grid Layout可以轻松解决装订线问题。

网格规格提供的属性可在网格项目之间创建空间，而忽略项目与容器之间的空间。这些属性是：

  • grid-column-gap
  • grid-row-gap
  • grid-gap(以上两个属性的简写)

最近，该规范已更新为与CSS Box Alignment Module兼容，该模块提供了一组可在所有Box型号中使用的对齐属性。因此，属性现在为：

  • column-gap
  • row-gap
  • gap(速记)

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

另外，如果需要在项目和容器之间留出间距，则容器上的padding效果很好(请参见下面演示中的第三个示例)。

从规格：

10.1. Gutters: the row-gap, column-gap, and gap
properties

The row-gap and column-gap properties (and their gap shorthand),
when specified on a grid container, define the gutters between grid
rows and grid columns. Their syntax is defined in CSS Box Alignment 3
§8 Gaps Between Boxes.

The effect of these properties is as though the affected grid lines
acquired thickness: the grid track between two grid lines is the space
between the gutters that represent them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.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;
}
1
 

更多信息：

  • 浏览器对CSS网格的支持
  • 使定义仅适用于弹性项目(讨论)之间的边距更加容易
  • flexbox项之间的间距

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

1
2
3
4
5
6
7
8
.flex-inline-row {
    display: inline-flex;
    flex-direction: row;
}

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

用法：

1
2
  <span>Testing</span>
  <span>123</span>

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

为什么不这样做：

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

这使用相邻的同级选择器为所有.item元素(第一个元素除外)提供margin-left。多亏了flexbox，这甚至导致了同样宽的元素。当然，这也可以通过垂直放置的元素和margin-top完成。

相关讨论

在解决方案中使用Flexbox时，我已将justify-content属性用于父元素(容器)，并且已在项目的flex-basis属性内指定了边距。
检查以下代码段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
  1
  2
  3
  4


  1
  2
  3


  1
  2

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

1
2
3
4
5
6
7
8
9
10
11
12
#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item + .item {
    margin-left: 5px;
}
1
 

Columnify-N列的独奏类

Flexbox和SCSS

1
2
3
4
5
6
7
8
9
10
11
.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

Flexbox和CSS

1
2
3
4
5
6
7
8
9
10
11
.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

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

在JSFiddle上玩它。

假设：

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  1
  2
  3
  4


  1
  2
  3
  4
  5
  6


  1
  2
  3
  4
  5
  6
  7
  8
  9

我发现最简单的方法是使用百分比，并且仅允许边距增加宽度

这意味着如果您使用示例，则最终会得到类似的结果

1
2
3
4
5
6
7
8
#box {
   display: flex;
}

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

确实意味着您的值基于宽度，但这可能并不适合所有人。

相关讨论

确实有一种不错的，整洁的，仅CSS的方法可以做到这一点(您可能会认为它"更好")。

在这里发布的所有答案中，我仅发现一个成功使用calc()的答案(由Dariusz Sikorski撰写)。但是，当出现以下情况时："但如果最后一行只有2个项目，它将失败"，因此没有扩展解决方案。

此解决方案通过替代负边距来解决OP的问题，并解决了Dariusz所面临的问题。

笔记：

  • 本示例仅演示3列布局
  • 它使用calc()让浏览器按照自己的方式进行数学运算-
    100%/3(尽管33.3333％应该也可以)，并且
    (1em/3)*2(尽管.66em也应该很好用)。
  • 如果元素少于列，则使用::after填充最后一行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.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;
}
1
2
3
4
5
6
7
8
9
10
11
Example 1 (2 elements)

  1
  2


Example 2 (3 elements)

  1
  2
  3

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

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

enter image description here

我为通过操纵填充和页边距而产生的错误结果来手动间隔卡片感到沮丧。所以这是我发现非常有效的CSS属性的组合：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<section class="card-container">
       

       
       

       
       

       
       

       
      </section>

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

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
/* u mean utility */
.u-gap-10 > *:not(:last-child) {
  margin-right: 10px;
}
1
 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#box {
  display: inline-flex;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 10px;
  height: 50px;
}

#box .item + .item {
  margin-left: 10px;
}
1
 

CSS gap属性：

现在有一个用于多列，flexbox和网格布局的新的gap CSS属性，现在可在某些浏览器中使用！ (请参阅我可以使用链接1；链接2)。

1
2
3
4
5
6
7
8
9
10
11
#box {
  display: flex;
  width: 100px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
1
 

撰写本文时，这只能在Firefox中使用。

我仅在弹性项目的容器设置的方向上设置其间距。
例如。如果将弹性容器设置为从左向右流动(flex-direction:row)，则仅在其子代上设置右边界，最后一个子代除外：

1
2
3
4
5
6
7
8
.flex-lr{
    display:flex;
    flex-direction:row;
}

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

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

如果物品包裹了怎么办？然后，我们也应该在适当的横轴侧添加空间。但是，如何知道容器是否允许其子容器包装？那wrap-reverse呢？

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

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

  • 它允许在单个点上"集中"所有供应商前缀，而不必理会。
  • 它允许将flexbox属性分组为一个类，甚至可以重命名flexbox使用的某些措辞，有时似乎不太直观(IMHO)。
  • 如果使用这些类，我将能够根据它们依赖的flex属性值编写其他类。例如。我将能够根据流向，横轴对齐方式，缠绕方式等设置间距。

    • 我最终建立了一个flexbox设计器，以解决所有这些问题，以帮助自己(以及其他人)了解flexbox的工作原理，并实现flexbox的出色之处。
    请通过以下链接随时使用它：

    http://algid.com/Flex-Designer

    因此，下面您将找到和抽象我使用的类以及一个流向的间距(边距)效用。您将可以推断其他人或在上面提供的链接中找到他们。为了简洁起见，此处省略了供应商前缀。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    /* 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;}

    现在，把我们带到这里的东西：项目之间的空间：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /* 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;}

    最后，这是标记的样子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
            Some content here...
       
       
            A bit more stuff here...
       
       
           
                Now vertical content
           
           
                etc.

    这就是我所说的代码。

    并非在每种情况下都有效，但是如果您具有灵活的子宽度(％)并且知道每行的项目数，则可以使用nth-child选择器非常清楚地指定必要元素的边距。

    这在很大程度上取决于您所说的"更好"。这种方式不需要为子元素或否定元素添加额外的包装器标记-但这两种东西都有它们的位置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    section {
      display: block
      width: 100vw;
    }
    .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%;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <html>
      <body>
         
           
           
           
           
           
           
           
         
       </body>
    </html>

    相关讨论

    我发现了一个骇客，因为我真的很需要我自己。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /* 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;
    }
    1
     

    这也是一个具有良好的flex增长类别的帖子网格。
    我想你会喜欢的。
    参见Codepen

    我之前遇到过同样的问题，然后偶然发现了答案。希望它能对其他人有所帮助。

    长答案短，在孩子的弹性项目上添加边框。
    那么您可以在弹性项目之间指定任意所需的边距。
    在代码段中，我将黑色用于说明目的，如果愿意，可以使用"透明"。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #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; }
    1
     

    盒子容器上的负边距技巧非常有效。这是另一个很好地处理订单，包装和其他内容的示例。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .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;
    }
    1
    2
    3
    4
    5
      1
      2
      3*
      4
      5

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

    我拒绝的一个想法是使用类似以下的方法从外部列中删除填充：

    1
    2
    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/

    简单的方法是在子div中添加margin-left和margin-right，并相应地调整margin值

    1
     

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .a{
       display: flex;
       justify-content: center;
       background-color: black;
    }

    .b{
      height: 25px;
      width: 25px;
      background-color: grey;
      margin-left: 5px;
      margin-right: 5px;
    }
    1
    2
    3
    4
    5
    #box {
        display:-ms-flex; /* Older IE Compatibility ;) */
        display:flex;
        justify-content:space-between;
    }

    不管您包含的div宽度是多少，" justify-content"属性都会使间隙均匀。

    因此，假设您的间隙为10px，您有4个元素，所以您有3个间隙：3 * 10px = 30px。

    1
    2
    3
    #box .item {
        flex-basis:calc((100% - 30px) /4);    
    }

    这个简单的计算只是减去所有加到容器宽度上的间隙，上面提到的'justify-content'属性负责水平对齐。
    剩余空间除以4(是，这是我们的元素数量)，从而为每个.item提供宽度。不需要其他属性，请记住它们已经对齐！

    希望这可以帮助！

    PS：如果需要在容器中设置宽度，如果间隙大小或元素数量发生变化，请设置宽度，将.item元素中的" flex-basis"计算固定为一行即可解决所有问题。

    您可以尝试CSS3的：not选择器

    例如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    #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;
    }
    1
     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
     :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;
    }
    1
     

    您也可以查看此示例。

    我使用了另一种方法。容器上已使用的负边距，该边距必须与每个子元素相同，例如10px。
    然后，为每个孩子使用calc()将宽度减小每边的总边距，在这种情况下为20px。

    这是一个例子：https://codepen.io/anon/pen/KJLZVg

    这有助于以响应方式执行操作，因为您无需针对特定的第n个子对象进行包装，从而使它在容器的两侧保持齐平。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .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;
    }

    还可以使用flex：0 0(宽度)来帮助IE浏览器。

    相关讨论

    好吧，关于CSS，imo的最简单解决方案，
    是在HTML中添加间隔符：

    1
     

    因此，您可以使用内联样式或类名对其进行控制。
    有时，也可以使用填充间隔。

    这是例子

    相关讨论

    tl; dr

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $gutter: 8px;

    .container {
      display: flex;
      justify-content: space-between;

      .children {
        flex: 0 0 calc(33.3333% - $gutter);
      }
    }
    相关讨论