html - 具有奇数元素和固定边距的 flex 网格

Question

好吧，这让我很头疼......

这是我的代码/例子

https://codepen.io/anon/pen/xXpjYa

.flex {
  display: flex;
  flex-wrap: wrap;
}

.imageContainer {
  flex: 1 0 30%;
  height: 200px;
  border: 5px solid black;
  background-color: deeppink;
  margin:15px;
}

.imageContainer:empty {
    height: 0;
    border: none;
};
 

<div class="flex">
    <div class="imageContainer">a</div>
    <div class="imageContainer">a</div>
    <div class="imageContainer">a</div>
    <div class="imageContainer">a</div>
    <div class="imageContainer"></div> 
    <div class="imageContainer"></div>
</div>

问题是我想实现/解决两件事:

• 最左边和最右边的列应该接触视口(viewport)的边缘
• 固定间距应为 30px，只有粉红色方框响应式拉伸(stretch)
• 请注意最后一项 (5) 比其他项略宽...为什么？？

请帮忙!谢谢!

Answer 1

您将边距设置为 15px，在 .imageContainer 上这适用于所有边，包括这些 imageContainer 和视口(viewport)。所以基本上你的第一个问题和你的第二个问题是相互对抗的。

您可以在 .imageContainer 上设置边距，在父级 .flex 上设置负边距以实现这两者。

最后一个可见项较长，因为它后面的两个 div 正在折叠而不显示，这会影响布局。如果您将 css 属性 box-sizing: border-box 添加到您的 .imageContainer 规则，它将解决此问题。您还可以为 .imageContainer 分配固定高度，或向所有 .imageContainer div 添加内容以防止这种情况发生。

参见 this codepen对于修改后的代码。