css - 元素之间的 Flexbox 填充，但边缘不填充

Question

我有一个像这样的基本 Flexbox 实现

.holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 500px;
  background: wheat;
}

.col img {
  max-width: 100%;
}

.col {
  width: 20%;
  float: left;
  text-align: center;
}

<div class="holder">
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
</div>

我试图在每个元素之间添加一些填充，但不在边缘添加一些填充。

flexbox 是最好的解决方案吗？有人可以给我举个例子吗？

Answer 1

您可以使用 flex-basis 属性，在其中使用 calc() 设置初始宽度 功能:

.holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 500px;
  background: wheat;
}

.col img {
  max-width: 100%;
}

.col {
  /*width: 20%;*/
  /*float: left; not necessary*/
  flex-basis: calc(20% - 5px);
  text-align: center;
}

/* addition, if desired */
img {
  display: block; /* removes bottom margin/whitespace; "vertical-align: bottom" does the same */
}

<div class="holder">
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
      <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
      <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  </div>