HTML / CSS：列之间的边框

Question

我正在尝试使用 Flexbox 创建一个列布局，并希望在每个列之间有垂直的全高边框。

这是我想要制作的东西——

.testing {
  display: flex;
  flex-direction: row;
  padding: 10%;
  flex-wrap: wrap;
  background-color: red;
  height: 20%;
}

.testing > div {
  width: 100px;
  background-color: green;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

<div class="testing">
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
</div>

我在某处读到最好使用 Flexbox 来实现这一点，但我找不到任何与边框相关的属性？

Answer 1

玩转

gap

属性。

.testing {
  display: flex;
  flex-direction: row;
  padding: 10%;
  flex-wrap: wrap;
  /* background-color: red; */
  height: 20%;
  gap: 1px;
}

.testing > div {
  width: 100px;
  background-color: green;
  /* margin: 10px; */
  padding: 10px;
  text-align: center;
  border: 10px solid red;
}

<div class="testing">
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
  <div class="col">
    00
  </div>
</div>