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

Question

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

例

#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表格的东西.

因此,实现您所要求的要求有点困难.

根据我的经验,不使用gap/ :first-child并且无需任何修改即可工作的"最干净"方式:last-child是设置flex-wrap:wrap容器和padding:5px子容器.这将margin:5px在每个孩子之间以及每个孩子和他们的父母之间产生差距.

演示

.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而不是margin.

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

Answer 3

CSSgap属性：

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

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

CSSrow-gap属性：

flexbox 和 grid 布局的row-gapCSS 属性允许您在行之间创建间隙。

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

CSScolumn-gap属性：

多列、弹性框和网格布局的column-gapCSS 属性允许您在列之间创建间隙。

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

Answer 4

flexbox和css calc()

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

小提琴演示

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

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

Answer 5

您可以使用透明边框.

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

例如

.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;使用背景时需要进行设置,否则背景将流入透明边框区域.

Answer 6

这适用于所有情况,即使我们有多行或任意数量的元素.

我们正在使用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中这只适用于IE11之后.

老答复

如果你想要你总是可以使用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>

Answer 7

您可以使用& > * + *selector来模拟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包装,可以使用包装元素:

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

Answer 8

假设您想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包装,请参阅以下示例.

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>

Answer 9

我找到了一个基于css ~选择器的解决方案~,并允许嵌入式嵌套.

有关工作示例,请参阅此代码笔

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

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

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

这是一个现场演示

Answer 11

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

Answer 12

我已经将它用于包裹和固定宽度的列.这里的关键是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示例

Answer 13

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

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

最终他们会将gap属性添加到flexbox.在那之前你可以使用CSS网格代替已经拥有该gap属性的CSS网格,并且只有一行.比处理利润更好.

Answer 15

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

您可以使用新财产gap。我复制粘贴我在本文中找到的解释以及更多信息

CSS 网格布局存在间隙（以前称为 grid-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>

Answer 17

为什么不这样做：

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

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

Answer 18

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

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

Answer 19

使用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: flex;
  width: 100px;
  margin: 0 -5px;
}

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

更多信息：

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

Answer 20

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

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