Flexbox项之间的间距

Question

这就是我要的:

我最接近的.在flexbox项目上应用保证金,然后从第一个和最后一个孩子中删除一半.

问题是:first-child并不总是第一个在视觉上,因为我可能会改变布局顺序(例子).

是否有办法在应用保证金时考虑视觉顺序？

Answer 1

CSS规范最近已经更新适用gap于除CSS网格元素属性Flexbox的元素。所有主要浏览器的最新版本都支持此功能。有了这个gap财产，你就可以得到你想要的gap: 10px东西（或你想要的任何尺寸）。

Answer 2

您可以尝试为所有框设置相同的边距,然后在容器上恢复此设置:

所以替换这个:

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

Answer 3

这是获得同样事物的另一种方式.

.vertical > div{ margin-bottom: 10px; }
.vertical > div:last-child{ margin-bottom: 0; }
.box + .box{ margin-left: 10px; }

Answer 4

虽然Rejoy的答案很完美,但它没有响应准备,因为行被锁定了.

flex-flow是你的新朋友.但是,flex并非没有错误.我们从各种网格框架中知道的负边距技巧确实有效,除非你在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 */
}

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

Answer 5

使用 Flex 的另一个要点是您可以指定用于剩余空间的策略：

.container {
    justify-content: space-between;
}