通过 CSS 的 Flex 图像网格单元只有一个边框

Question

我有一个 flexbox 图像网格，我试图只为每个单元格添加一个边框 - 挑战在于这是一个将继续向其添加图像的网格，所以我将永远不知道会有多少 images/cells。我试图通过 CSS 单独完成此操作。我的代码：

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

.item {
  padding: 5px;
}

<div class="container">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
</div>

明显的挑战是避免像这样不可避免地在 class .item:

上创建的双边框

border: 1px solid #000;

并且事先不知道网格中会有多少图像意味着我不能使用 :nth-of-type(xn) 之类的东西来删除或添加边框。感谢您在这里提供的任何帮助。

Answer 1

有点老套，但使用 1 像素的负左和上 margin 将覆盖双边框。

* {
  box-sizing: border-box;
}

.container {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 5px;
}

.item {
  border: 1px solid #000;
  padding: 5px;
  margin: -1px 0 0 -1px;
}

<div class="container">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
  <img class="item" src="https://via.placeholder.com/150x100" alt="Example image">
</div>

通过 CSS 的 Flex 图像网格单元只有一个边框

Only One Border for Flex Image Grid Cells via CSS

html

css

flexbox

border