Question

我有一个固定宽度的容器。此外，它内部固定有固定宽度的固定高度的物品。我希望容器内的项目之间有空格，但我也希望它们触及容器的边框。这样，我无法为每个项目添加边距，因为这会导致它们不会触及容器的边框。请参阅代码段：

＆＃13;

.container {
    width: 400px;
    border: 4px solid red;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
    background-color: #AAAAFF;
}
    
.item {
    flex: 0 0 60px;
    height: 100px;
    width: 60px;
    height: 60px;
    border: 2px solid blue;
    background-color: gray;
    box-sizing: border-box;
}

＆＃13;

<div class="container">
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
</div>

＆＃13;

结果几乎是我想要的，但我想，

在行对之间添加10px空格;
让最后一行与左侧对齐 - 我不希望最后一项之间有那么大的间距。

这怎么可能？

Answer 1

这应该在行之间添加所需的空格。

.item:nth-child(n + 7) { margin-top: 10px; }

它被称为结构伪类，在这里阅读所有相关内容： http://www.sitepoint.com/getting-to-know-css3-selectors-structural-pseudo-classes/

Answer 2

我不知道这是否可以用css flex完成，但是在设置所有高度和宽度时，flex是不必要的，使用inline-block可以轻松完成。

.container {
    width: 400px;
    border: 4px solid red;
    display: inline-block;
    background-color: #AAAAFF;
}

.item {
    display: inline-block;
    min-width: 60px;
    height: 60px;
    border: 2px solid blue;
    background-color: gray;
    box-sizing: border-box;
}

.item:nth-child(n+7){
    margin-top: 10px;
}

注意：我添加了Örvar答案中的保证金修正，只是为了让答案完整，所以归功于他。请注意，如果您更改容器项目的宽度，则可能需要调整n + 7，因此这不是完全动态的，但我看不到其他方法。

如何在Flexbox容器内的项目之间添加空格，而不阻止它们触摸容器的边框？

2 个答案: