设置弹性框项目之间距离的更好方法

776

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

例 

#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>
展开摘要

css  flexbox 
— 萨莎·科斯（Sasha Koss）
source
28
这不是hack-它是对齐项目的预期方法之一。虽然还有其他属性。参见w3.org/TR/css3-flexbox/#alignment
— BoltClock
4
是的，我了解。但是例如，存在column-gap属性使我们能够控制与容器的距离：w3.org/TR/css3-multicol/#column-gap
— Sasha Koss 2013年
原因是flexbox的边距折叠。另一个问题是[如何停止flexbox中的最后一个边距折叠？]（stackoverflow.com/questions/38993170/…）
— 杰克·杨
6
CSS Box Alignment Module Level 3（CSS盒子对齐模块级别3）包括有关盒子之间的间隙的部分-适用于多列元素，伸缩容器和网格容器。所以最终这将很简单：row-gap: 5px-完成。
— Danield
2
@JohnCarrell firefox实际上已经支持gapflex容器（caniuse）上的属性
— Danield，

Answers:

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

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

以我的经验，不使用: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>
展开摘要

— 所有工人都是必不可少的
source
218
这并没有完成问题所要解决的事情，您将在最左边和右边有一个10px的缩进，我假设他们不打算这样做。因此，原始问题中的负边距。
— 克里斯·尼古拉
17
如果order设置属性呢？:first-child/:last-child将无法正常工作。
— 古里亚
4
“ Flexbox的利润率没有下降。” 非常有见地，显然是真实的，但是我可以要求引用吗？
— chharvey
2
这不是比原始问题更糟糕的答案吗？此方法要求您在容器周围有空间，装订线必须始终为偶数。
— limitlessloop
7
@chharvey，来自规格w3.org/TR/css-flexbox-1/#item-margins，“相邻弹性项目的边距不会塌陷。”
— 罗勒姆
195

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

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}
— 鲁梅利斯·乔治
source
1
这种方法的唯一问题是保持与背景颜色相等的高度项目。的绝对定位会height:100%; width:100%忽略该项目的填充。
— 史蒂文·瓦雄
3
此处的问题是IE10和11。flex-basis值不占box-sizing: border-box，因此具有任何填充或边框的子项将溢出父项（或在这种情况下自动换行）。资料来源
— 卡森
18
这种方法还有另一个问题：像这样调整页边距可以扩大页面宽度。演示：jsfiddle.net/a97tatf6/1
— 内森·奥斯曼
4
尽管我同意这不是hack，但某些东西被广泛使用的事实并不意味着它不是hack。参见polyfills，临时安全补丁，十六进制编辑等
— William
15
当然这是黑客。因为Bootstrap使用此方法并不意味着它不是黑客。这仅表示Bootstrap使用了hack。
— Michael Benjamin
108

Flexbox和CSS Calc具有多行支持

您好，以下是适用于所有支持flexbox的浏览器的工作解决方案。无负边距。

小提琴演示

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

/*
  align last row columns to the left
  3n - 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在最后一行中删除了下边距

— 达里乌斯·西科斯基（Dariusz Sikorski）
source
13
我喜欢这种解决方案，但是如果最后一行只有2个项目，则该解决方案将失败。由于的原因，这些物品没有堆放在一起justify-content。
— 詹姆斯·布朗特
4
要解决这两个问题，只需更改为justify-content: space-evenly;或即可justify-content: space-around;。
— 保罗·鲁尼
6
@PaulRooney如果列表是由CMS生成的，则在具有多个列表的站点上，您可能并不总是知道项目的数量。
— NinjaFart '18
1
@ 1.21gigawatts请不要对他人的代码/答案进行任何更改；而是自己写答案。
— TylerH '19
2
@TylerH这不是任意的。该问题询问如何“ ...设置弹性框项目之间的距离”。这个答案没有显示出水槽的大小。设置背景颜色将显示装订线。添加边框显示最后一行下方有空白。
— 1.21吉瓦，
93

您可以使用透明边框。

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

例如

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

另请注意，您需要min-width: 50px;使用flexbox。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;使用背景时必须进行设置，否则背景将流入透明边框区域。

— 六溶
source
5
好答案。在flexbox中，边距的使用方式有所不同（例如，吸收多余的空间），因此透明边框为均匀间隔的元素提供了极好的解决方案，这些元素可以像边距一样包裹起来
— Eolis 2015年
4
除非使用背景色，否则背景会超出所需的范围。
— ahnbizcad 2015年
2
@ahnbizcad背景颜色不同，您可以使用白色或适当的颜色，具体取决于背景是哪种方式。
— hexalys 2015年
27
@ahnbizcad：如果不需要IE8支持，这是一个更好的解决方案：background-clip: padding-box
— Albin
5
Albin的评论需要更多票！这是最好的解决方案。透明的边框以及background-clip：padding-box（填充，如果需要，可以在容器上使用负边距，以实现正确的边缘对齐）是一个完美的解决方案。IE8仍然不支持flexbox，因此它对background-clip的缺乏支持也没关系。
— 布赖恩
74

即使存在多行或任意数量的元素，该解决方案也适用于所有情况。但是该部分的计数应该与您希望第一行中的4和第三行是第二行的计数相同，这样第4个内容的空间将为空白，容器将无法填充。

我们正在使用 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>
展开摘要

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

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

老答案

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

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

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

下面的代码将解决问题。在这种方法中，没有必要给margin: 0 -5px;到#box包装。

适合您的工作示例：

#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>
展开摘要

— 韦伯
source
我已经编辑了基于网格的答案，以证明它可以正常工作，即使最后一行的项目较少。为了证明它在这种情况下有效。（如果您不喜欢此更改，请随时还原。）
— ToolmakerSteve
根据这个问题，他们只要求使用子元素正确填充空间，而不会受到干扰，我所做的事情是，使用网格我们可以按照grid-template-columns我们定义的方式进行动态管理。因此，如果您将值赋予，1fr 1fr 1fr 1fr则它将div分割为，4fractions并尝试填充每个子元素fractions，据我所知，这是唯一的方法grid。我在答案中说过的是，如果用户需要将div拆分为4，并将它们与甚至用于多行的许多元素一起使用，这gid将有所帮助。
— weBBer '19
68

您可以& > * + *用作选择器来模拟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 wrap，则可以使用wrapper元素：

.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>
展开摘要

— 做异步
source
3
清洁溶液。适用于任意数量的flex子元素。
— KonradGałęzowski
1
这正是我一直在寻找和我👍伟大的工作
— 保罗剧场
需要注意的一点是，*操作员并没有像您期望的那样增加特异性。因此，根据您现有的CSS，您可能需要增加.flex > *选择器的特异性，或者!important如果还有其他选择器向该元素应用边距，则可能需要添加规则。
— Paul Odeon
最佳解决方案
— o01
26

假设您要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>
展开摘要

如果要允许使用flex wrap，请参见以下示例。

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>
展开摘要

— 贴纸
source
6
如果包装了物品，这将不起作用，因为:last-child这不会影响行尾的每个最后一个孩子，对吗？
— Flimm
2
@Flimm我添加了一种使用flex wrap的方法，请参见上面的第二部分。
— 贴纸
给我最好的答案...简单，干净，高效！与弹性包裹膜完美配合，谢谢
— MatthieuMarcé19/
16

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

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

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

.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>
展开摘要

— 西蒙·埃普斯坎普
source
由于未全局应用边距，因此会导致大小不同的项目。
— 史蒂芬·瓦雄
您还需要添加一些额外的CSS来处理较小的屏幕，因为在移动设备上看起来有点奇怪，我将.box〜.box规则应用于较大的屏幕，对于较小的屏幕，请将.box类设置为具有最大宽度100％和保证金底部。
— rhysclay
14

从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>
— 克里斯
source
2
这与问题中给出的示例是否基本相同？
— 福特
9

我已将其用于包装和固定宽度的列。这里的关键是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});}

}

完整的Codepen样本

— VeikoJääger
source
2
这仍会在第一个项目之前和最后一个项目之后添加装订线，这将防止OP使用负边距。
— 赫尔曼
2
Flexbox的不支持内部“柔性”项计算值（）的IE 11
— 亚当Šipický
不能总是使用。想象是否还需要直接孩子的边境
— 安德里斯·
9

甲柔性容器与-x（负）余量和柔性物品与X（正）余量或填充既导致所希望的视觉效果：弹性件具有2X的固定间隙仅之间彼此。

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

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

.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;
}
— 提姆
source
3
抱歉，我没收到。您的答案引入了什么新问题，而问题又没有直接说出来？
— 用户
首先，我想总结一下，弹性项目上的边距和填充都可以达到预期的结果，因为现有的答案只提及其中一个。其次，我想举一个例子，通过缩放弹性项目本身来保留空白。
— 蒂姆（Tim）
这是一个显示这种效果的codepen示例。codepen.io/dalgard/pen/Dbnus
— 踏板
5

在解决方案中使用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>
展开摘要

— iClusterDev
source
5

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

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

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

...或更改HTML（如另一个答案所示）：

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

... 或者是其他东西。

无论如何，您都需要一个丑陋的技巧来使其正常工作，因为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。天沟：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>
展开摘要

更多信息：

— 迈克尔·本杰明
source
5

的CSS gap属性：

现在有一个新的gapCSS属性可用于多列，flexbox和网格布局，现在可以在某些浏览器中使用！（请参阅我可以使用链接1；链接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中使用。如果您在中启用“启用实验性Web平台功能”，则该功能目前在Chrome中有效about:flags。

— 弗利姆
source
4

为什么不这样做：

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

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

— 翻土机
source
8
只要弹性项目始终在单行中，这将起作用。如果允许包装，那么可能还不够。
— Nick F
4

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

.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以外的间距类进行扩展。

— MK10
source
4

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

#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>
展开摘要

— 乌策拜尔
source
3

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

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

#box {
   display: flex;
}

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

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

— fra
source
刚遇到这个解决方案，是的，非常好。至少对我而言有效（对于那些可能会发现它很有趣的人，它是一支钢笔：codepen.io/rishatmuhametshin/pen/XXjpaV）。
— rishat
2

这是卡片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>
展开摘要

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

— buildpax
source
更新：此间距对于需要特定对齐方式（例如，中心，左侧等）的移动呈现HTML元素有效。如果您发现使用flex box进行移动开发，那么我会发现转向纯基于边距的对齐方式时会感到放心。
— buildpax
2

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上玩。

— 祖菲克斯
source
1 

#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>
展开摘要

— 吴mo
source
1

只需.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>
展开摘要

— 安德鲁·卢卡（Andrew Luca）
source
1

假设：

  • 您需要带包装的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>
展开摘要

— 萨尔曼A
source
1

确实有一种不错的，整洁的，仅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

— aequalsb
source
1

您可以使用新属性gap。我复制粘贴在本文中找到的说明以及更多信息

CSS网格布局有一段时间（以前是grid-gap）存在差距。通过指定包含元素的内部间距而不是子元素周围的间距，gap解决了许多常见的布局问题。例如，使用gap，您不必担心子元素的边距会在包含元素的边缘周围引起不必要的空格：

不幸的是，目前只有FireFox支持Flex布局中的空白。

@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>
展开摘要

— 安德烈斯·保罗（Andres Paul）
source
gap已经在这里的答案中推荐了stackoverflow.com/a/58041749/2756409而且，这不是CSS。
— TylerH
0

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

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

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>
展开摘要

— 詹姆罗宾逊
source
没有反应。仅适用于固定宽度的父级。
— 格林
1
OP不要求响应式解决方案，他们的示例使用固定宽度。鉴于此使用％值，因此很容易就认为这是响应式的，因为这些项目将适应由百分比设置的父项的大小。
— jnmrobinson
0

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

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

#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>
展开摘要

— 调音
source
0

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

.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>
展开摘要

— 吉斯莱
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.