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

Question

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

Example

#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>

Answer 1

• Flexbox没有折叠边距。
• Flexbox与表格的border-spacing没有任何相似之处。

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

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

Demo

.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>

Answer 2

这不是黑客攻击。 引导程序及其网格也使用相同的技术，但引导程序使用填充作为其cols而不是边距。

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

Answer 3

您可以使用透明边框。

我在尝试构建一个可以回退到旧版浏览器的表+表格单元模型的弹性网格模型时考虑过这个问题。在我认为最好的选择是对于栏目排水沟的边界。即表格单元格没有边距。

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模型。 这是一个更接近flex模型的东西：http://jsfiddle.net/GLpUp/5/

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

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

Answer 4

flexbox和css calc（）

您好，以下是我支持flexbox的所有浏览器的工作解决方案。没有负利润，没有黑客，没有解决方法，纯粹的Css。

<强> Fiddle Demo

＆＃13;

＆＃13;

   
.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;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}

＆＃13;

<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

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

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

#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;
}

<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>

此方法的缺点是移动 Opera Mini 将不受支持，而且在PC中这仅适用于 IE10 。

Note for complete browser compatability including IE11 please use Autoprefixer

OLD ANSWER

如果您愿意，可以随时使用 CSS同级组合 ：

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

以下代码可以解决问题。在此方法中，无需将 margin: 0 -5px; 提供给 #box 包装器。

适合您的工作样本：

#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>

Answer 6

我找到了一个基于css preceded by选择器~的解决方案，并且允许嵌入式嵌套。

See this code pen for a working example

基本上，在列容器内，每个前面有另一个孩子的孩子都会获得一个上边距。同样，在每个行容器中，每个前面有另一个子项的子项都会获得左边距。

.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>

Answer 7

如果您想在项目之间设置10px空格，您可以为所有项目设置.item {margin-right:10px;}，并在最后一项.item:last-child {margin-right:0;}上重置

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

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

＆＃13;

＆＃13;

body {
  margin: 0;
}

.container {
  display: flex;
}

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

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

＆＃13;

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您想允许 flex wrap ，请参阅以下示例。

＆＃13;

＆＃13;

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

＆＃13;

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 8

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

＆＃13;

＆＃13;

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

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

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

＆＃13;

<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您需要支持 flex wrap ，可以使用包装元素：

＆＃13;

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 9

继续sawa的回答，这是一个稍微改进的版本，允许您在没有周围边距的项目之间设置固定的间距。

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

还包括Safari＆＃34; -webkit-flex＆＃34;版本

.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>

Answer 10

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

SCSS样本

$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});}

}

Full Codepen sample

Answer 11

flex容器 -x（负面）边距和 flex项目 x（正面）边距或填充都会产生所需的视觉效果：Flex项目之间的固定间距为

这似乎只是一个偏好问题，无论是在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;
}

Answer 12

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

Answer 13

根据#ChromDevSummit，Flexbox已实现gap属性，尽管目前（2019年11月14日）为only supported in Firefox，但应尽快在Chrome中实现：

Live Demo

我也将在Chrome浏览器中更新答案。

Answer 14

在我的解决方案中使用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>

Answer 15

为什么不这样做：

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

这使用https://github.com/uji-ros-pkg/visualization_osg来提供所有.item元素，但第一个元素除外margin-left。感谢flexbox，这甚至可以产生同样宽的元素。当然，这也可以使用垂直定位的元素和margin-top来完成。

Answer 16

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

您需要使用负边距（as shown in the question）：

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

...或更改HTML（as shown in another answer）：

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

......或其他。

在任何情况下，你需要一个丑陋的黑客来使其工作，因为flexbox不提供“flex-gap”功能 （at least for now）。

然而，使用CSS网格布局，装订线的问题简单易行。

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

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

最近，规范已更新为符合CSS Box Alignment Module，它提供了一组对齐属性，可用于所有盒子模型。所以属性现在是：

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

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

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

来自规范：

  

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

     

row-gap和column-gap属性（及其gap简写），   在网格容器上指定时，定义网格之间的排水沟   行和网格列。他们的语法在CSS Box Alignment 3 §8 Gaps Between Boxes中定义。

     

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

.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>

更多信息：

• Browser Support for CSS Grid
• Make it easier to define margins that only apply between flex-items（讨论）
• Spacing between flexbox items

Answer 17

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

.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>

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

Answer 18

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

＆＃13;

＆＃13;

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item + .item {
    margin-left: 5px;
}

＆＃13;

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 19

Columnify - 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上播放。

Answer 20

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

＆＃13;

＆＃13;

#box {
  display: inline-flex;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 10px;
  height: 50px;
}

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

＆＃13;

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 21

CSS gap属性：

现在有一个新的gap CSS property用于多列，flexbox和网格布局，现在可以在某些浏览器中使用！ （请参阅我可以使用link 1; link 2）。

#box {
  display: flex;
  width: 100px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

在撰写本文时，可悲的是，这仅适用于Firefox。

Answer 22

<div id='box' class="u-gap-10">
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

React.createElement()

Answer 23

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

通过使用iffy结果操纵填充和边距来手动间隔卡片，我感到很沮丧。所以这里是我发现非常有效的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>

希望这有助于人们，现在和将来。

Answer 24

确实有一种不错的，整洁的，仅CSS的方式来执行此操作（可能会认为“更好”）。

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

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

注释：

• 此示例仅演示了三列布局
• 它使用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>

也在this StackOverflow question/answer

Answer 25

假设：

• 您希望四列网格布局带有环绕效果
• 项目数不一定是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>

Answer 26

我发现这样做的最简单方法是使用百分比并且只允许边距计算宽度

这意味着如果您使用示例

，最终会得到类似的结果

#box {
   display: flex;
}

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

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

Answer 27

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

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

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%;
}

<html>
  <body>
      <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>
   </body>
</html>

Answer 28

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

.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>

这就是我所说的代码。

Answer 29

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

/* 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增长类别的帖子网格。 我想你会喜欢它。 See Codepen

Answer 30

盒子容器上的负边距技巧效果很好。这是另一个与订单，包装和不适用的工作很好的例子。

.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>

Answer 31

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

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

#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>

Answer 32

#box {
    display:-ms-flex; /* Older IE Compatibility ;) */
    display:flex;
    justify-content:space-between;
}

无论您所包含的div宽度是多少，“ justify-content ”属性都会使间隙均匀。

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

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

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

希望这会有所帮助！

PS：如果需要在容器中设置宽度，则要设置宽度，如果间隙大小或元素数量发生变化，则将其固定为.item元素中的“ flex-basis”计算，以在一行中解决所有这些问题。 / p>

Answer 33

今天，您可以在 flex 容器上使用 'gap' 属性，所有主要浏览器都支持该属性。

Answer 34

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

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

Answer 35

您可以尝试使用CSS3：不是选择器

例如：

＆＃13;

＆＃13;

#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;
}

＆＃13;

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 36

我发布了我的flexbox方法 here：

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

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/

Answer 37

我使用了另一种方法。容器上已使用的负边距，该边距必须与每个子元素相同，例如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浏览器。

Answer 38

 :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>

您也可以查看此example。

Answer 39

使用 css display: inline-flex; 值。

html

<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

css

.box {
    display: inline-flex;
    gap: 10px; // gap between items
}

Answer 40

TL;博士

$gutter: 8px;

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

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

Answer 41

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

<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>

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

here is the example