伸缩项目之间的间距相等

Question

有没有办法在所有物品的两面都放置一个完整的空间，包括第一个和最后一个？

我正在尝试找到一种在flexbox子代之间具有相等间距的方法。

在本文中 ，最近的事情似乎是justify-content: space-around 。 它说：

space-around ：项目在行中均匀分布，周围具有相等的空间。 请注意，从视觉上看，空间是不相等的，因为所有项目的两侧都具有相等的空间。 第一项相对于容器边缘有一个单位的空间，但是下一项之间有两个单位的空间，因为下一项具有自己的适用间距。

Answer 1

至少有两种方法可以使所有项目（包括第一个项目和最后一个项目）之间的距离相等。 但是，一种方法尚未完全支持浏览器。

---

伪元素

请注意Firefox文档中的这一部分：

流入::after和::before伪元素现在是flex项目 。

实际上，所有主流浏览器都将flex容器上的伪元素视为flex项。

知道了，将::before和::after添加到您的容器中。

使用justify-content: space-between和零宽度的伪元素之间，可见的flex项目将均匀分布。

 flex-container { display: flex; justify-content: space-between; } flex-container::before { content: ""; } flex-container::after { content: ""; } /* non-essential decorative styles */ flex-container { padding: 5px 0; background-color: lightyellow; border: 1px solid #aaa; } flex-item { height: 50px; width: 75px; background-color: lightgreen; } 

 <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 

---

space-evenly

CSS框对齐模块 ，这是W3C尚未完成的建议，用于建立一套通用的对齐属性以供所有框模型使用，它提供了space-evenly值，以与justify-content和align-content属性一起使用。

4.3。 分布式对齐方式： stretch ， space-between ， space-around和space-evenly关键字

space-evenly

对齐对象均匀地分布在对齐容器中，两端各有一个完整的空间。

对准对象被分布，使得在任何两个相邻对准对象之间，在第一个对准对象之前和最后一个对准对象之后的间隔是相同的。

但是，在撰写本文时，它看起来似乎只在Firefox和Chrome中适用于 space-evenly 。

 flex-container { display: flex; justify-content: space-evenly; } /* non-essential decorative styles */ flex-container { padding: 5px 0; background-color: lightyellow; border: 1px solid #aaa; } flex-item { height: 50px; width: 75px; background-color: lightgreen; } 

 <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 

另外，这是MDN justify-content页面中的有用演示，用于测试浏览器中的space-evenly和其他值。 https://jsfiddle.net/gkrsr86n/

Answer 2

您可以通过设置弹性容器的padding和弹性项目的margin来做到这一点：

.container { 
  display: flex;   
  padding: 0 1%;
}
.item { 
  flex: 1; 
  margin: 0 1%;
}

https://codepen.io/danieldilly/pen/PjgRbe

Answer 3

在firefox中，只有justify-content的space-evenly值可以做到这一点。

在CSS3工作草案中

https://www.w3.org/TR/css-align-3/#valdef-align-content-space-evenly

 div { display: flex; height: 100px; justify-content: space-evenly; border: 1px solid black; margin: auto; } span { width: 20%; background: red; } 

 <div> <span></span> <span></span> <span></span> </div> 

Answer 4

这是flex-basis和justify-content: space-between的完美用例justify-content: space-between如果您事先知道行中将有多少个组件，请justify-content: space-between使用justify-content: space-between 。 在弹性项目上指定所有项目的总弹性百分比小于100％。 剩余的百分比将成为边距。

没有伪元素，子选择器或填充/边距。

 div { display: flex; justify-content: space-between; height: 100px; } span { flex-basis: 32%; background: red; } 

 <div> <span></span> <span></span> <span></span> </div> 

Answer 5

您可以尝试以下方法：

 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .list_wrap { display: flex; flex-wrap: wrap; border: 1px solid purple; padding-top: 5px; } .list_item { width: 24%; margin-right: 0.8%; margin-bottom: 5px; height: 30px; border: 1px solid green; } .list_item:nth-child(4n+1) { margin-left: 0.8%; } 

 <div class="list_wrap"> <div class="list_item"></div> <div class="list_item"></div> <div class="list_item"></div> <div class="list_item"></div> <div class="list_item"></div> <div class="list_item"></div> <div class="list_item"></div> <div class="list_item"></div> </div> 

Answer 6

您可以在此处使用flexbox的all属性形式。 这是如何通过示例http://the-echoplex.net/flexyboxes/使用完整的flex属性的完美示例