Flexbox项目之间的间距
这就是我要的：
我得到的最近 在Flexbox项目上应用边距，然后从第一个和最后一个子项中删除一半。
问题是:first-child并不总是第一个可见的，因为我可能会改变布局的顺序（ 例子 ）。
在应用边距时，有没有办法将视觉顺序考虑在内？
您可以尝试为所有框设置相同的边距，然后在容器上还原该边距：
所以replace这个：
.flex > * { margin: 0 10px; } .flex > :first-child { margin-left: 0; } .flex > :last-child { margin-right: 0; } .flex.vertical > :first-child { margin-top: 0; } .flex.vertical > :last-child { margin-bottom: 0; }
有了这个：
.flex.vertical { margin: -20px 0 0 -20px; } .flex > * { margin: 0 0 0 20px; } .flex.vertical > * { margin: 20px 0 0 0; }
这是获得同样的东西的另一种方式。
.vertical > div{ margin-bottom: 10px; } .vertical > div:last-child{ margin-bottom: 0; } .box + .box{ margin-left: 10px; }
虽然Rejoy的答案完美的作品，它没有响应就绪，因为行被locking。
flex-flow是你的新朋友。 但是，flex不是没有bug的。 我们从各种网格框架知道的负边际技巧是行得通的，除非你是在IE上，因为它使用内容框作为盒子大小，元素包装得太早。 但是有一个简单的解决方法。
工作示例： https ： //jsfiddle.net/ys7w1786/
.flex { display: flex; flex-direction: row; /* let the content flow to the next row */ flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; margin: -4px -4px; /* grid trick, has to match box margin */ }
由于IE浏览器，这些框带有flex-basis: auto 。 但是我们可以简单地使用width ：
.box { flex: 0 0 auto; /* auto is important because of an IE bug with box-size */ height: 100px; display: inline-block; background-color: black; margin: 4px; /* spacing between boxes, matches parent element */ } .s1-2{ width: calc(50% - 8px); } .s1-4{ width: calc(25% - 8px); }
编辑 – 我不build议使用这种方法，这是hackish。 我将留在这里为后代。
我做了什么来解决这个问题，因为我不确定在每个弹性空间内有多less元素。 例如，我正在构build一个Drupal主题，并且有四个并排alignment的区域，但是我希望能够占用全部的宽度，即使只有三个区域中有内容。
- 给每个区域填充10px
- 设置每个区域的背景颜色以匹配主题背景颜色 – 在我的例子中是白色的
- 在每个区域内创build一个div（创build它们之间的边距幻觉。
HTML看起来像这样：
<div class="flexy"> <div class="region"> <div class="region-inner"> </div> </div> </div>
CSS看起来像这样：
.flexy { display: flex; flex-wrap: wrap; } .flexy .region { box-sizing: border-box; flex-grow: 1; flex-basis: 0; padding: 10px; }
这让我有一个像这样的布局（忽略丑陋，颜色只是为了certificate）： 
还有其他一些类，如“半”，“三分之二”和“宿舍”，以帮助在较小和/或较大的屏幕上做出响应。
使用Flex的另一个重点是可以指定用于剩余空间的策略：
.container { justify-content: space-between; }
