CSS 弹性盒项目之间的间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23433436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Spacing between flexbox items
提问by nice ass
This is what I want:
这就是我要的：
The closest I've got.Applying margin on flexbox items, then removing half of it from the first & last children.
我最接近的。在 flexbox 项目上应用边距，然后从第一个和最后一个子项中删除一半。
The problem is that :first-childis not always the first visually, because I may alter the layout order (example).
问题是这:first-child在视觉上并不总是第一个，因为我可能会改变布局顺序（示例）。
Is there a way to take the visual order into account when applying the margin?
有没有办法在应用边距时考虑视觉顺序？
采纳答案by neurodynamic
The CSS spec has recently been updatedto apply gapproperties to flexbox elements in addition to CSS grid elements. Not all browsers support this yet (just Firefox at time of writing; the bug tracker page for adding it to Chrome is here), but this should soon be something you can do with just gap: 10px(or whatever size you want) without needing to deal with margins, :first-child, :last-child, etc.
CSS规范最近已经更新适用gap于除CSS网格元素属性Flexbox的元素。并非所有浏览器都支持此功能（在撰写本文时仅支持Firefox；将其添加到 Chrome 的错误跟踪器页面在这里），但这应该很快就会成为您可以使用的东西gap: 10px（或您想要的任何大小）而无需处理边距:first-child、:last-child、 等。
回答by agrm
You can try setting the same margin for all the boxes, and then revert this on the container:
您可以尝试为所有框设置相同的边距，然后在容器上还原：
So replace this:
所以替换这个：
.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; }
With this:
有了这个：
.flex.vertical { margin: -20px 0 0 -20px; }
.flex > * { margin: 0 0 0 20px; }
.flex.vertical > * { margin: 20px 0 0 0; }
回答by galki
here is another way of getting the same thing.
这是获得相同内容的另一种方法。
.vertical > div{ margin-bottom: 10px; }
.vertical > div:last-child{ margin-bottom: 0; }
.box + .box{ margin-left: 10px; }
回答by dube
While Rejoy answerworks perfectly, it's not responsive-ready, because the rows are locked.
虽然Rejoy answer工作得很好，但它不是响应式的，因为行被锁定。
flex-flowis your new friend. However, flex is not without bugs.
The negative margin trick we know from various grid framework does work, unless you are on IE, where the elements get wrapped too early because it uses content-box as box-size. But there is an easy workaround.
flex-flow是你的新朋友。然而，flex 并非没有缺陷。我们从各种网格框架中了解到的负边距技巧确实有效，除非您使用的是 IE，因为它使用 content-box 作为 box-size 元素过早包装。但是有一个简单的解决方法。
Working example: https://jsfiddle.net/ys7w1786/
工作示例：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 */
}
The boxes come with flex-basis: auto, because of IE. But we can simply use widthinstead:
flex-basis: auto由于 IE，这些盒子带有。但我们可以简单地使用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);
}
回答by Pierre Lemée
Another solid point for using Flex is that you can specify the strategy to use for the remaining space:
使用 Flex 的另一个要点是您可以指定用于剩余空间的策略：
.container {
justify-content: space-between;
}
回答by Mark Conroy
EDIT - I don't suggest using this approach, it's hackish. I'll leave it here for posterity.
编辑 - 我不建议使用这种方法，它是hackish。我会把它留在这里给后代。
What I did to approach this, since I wasn't sure how many elements I'd have within each flex space. For example, I am building a Drupal theme and have four regions that align side-by-side, but I want the full width to be taken up, even if there is content in only three of the regions.
我做了什么来解决这个问题，因为我不确定每个弹性空间中有多少元素。例如，我正在构建一个 Drupal 主题并且有四个并排对齐的区域，但我希望占据整个宽度，即使只有三个区域中有内容。
- Gave each region a padding of 10px
- Set the background colour of each region to match the theme background colour - in my case white
- Created a div inside each region (to create the illusion of a margin between them.
- 给每个区域一个 10px 的填充
- 设置每个区域的背景颜色以匹配主题背景颜色 - 在我的情况下为白色
- 在每个区域内创建一个 div（以在它们之间创建边距的错觉。
HTML looks like this:
HTML 看起来像这样：
<div class="flexy">
<div class="region">
<div class="region-inner">
</div>
</div>
</div>
CSS looks like this:
CSS看起来像这样：
.flexy {
display: flex;
flex-wrap: wrap;
}
.flexy .region {
box-sizing: border-box;
flex-grow: 1;
flex-basis: 0;
padding: 10px;
}
This leaves me with a layout like so (ignore the ugliness, the colours are only to demonstrate):
这给我留下了这样的布局（忽略丑陋，颜色只是为了演示）：
There are some other classes added such as 'halves', 'thirds', and 'quarters' to help out making things responsive on smaller and/or larger screens.
添加了一些其他类，例如“一半”、“三分之一”和“四分之一”，以帮助在较小和/或较大的屏幕上做出响应。
回答by Rejoy
The desired layout can be achieved using a wrapper div with negative margin
使用具有负边距的包装 div 可以实现所需的布局
.flex-wrapper{
margin: -20px;
}
Working code http://jsfiddle.net/8cju5jpd/
回答by Mario Vázquez
Trying to stick on your question:
试图坚持你的问题：
Is there a way to take the visual order into account when applying the margin?
有没有办法在应用边距时考虑视觉顺序？
I would say no, the same way you cannot style an element based on the value of, let's say, its background color. To do so, you could write custom classes to set the flex order and then subclass based on them.
我会说不，就像你不能根据元素的值设置样式一样，比如说，它的背景颜色。为此，您可以编写自定义类来设置 flex 顺序，然后基于它们创建子类。
Please check out this interesting thread where I posted my solution on spacing: Better way to set distance between flexbox items
请查看这个有趣的线程，我在其中发布了关于间距的解决方案： Better way to set distance between flexbox items
回答by eugene
is it bad to create an dummy div / View for spacing?
为间距创建一个虚拟的 div/View 是不是很糟糕？
<Item style={{flex:1}} />
<View style={{width: 10}}
<Item style={{flex:1}} />
