Flexbox space-between 均匀的项目分布

Question

我正在尝试归档 flexbox 项目之间的空间，但 justify-content: space-between 似乎没有按我预期的那样工作。 我需要每个项目的宽度为 4px。 我知道我可以使用 justify-content:space-evenly，但是第一个和最后一个项目不是，而且是盒子的开始/结束。 我还尝试在项目上设置 margin-right: auto ，但它也不起作用。 必须有 40 个项目。 您知道其他解决方案吗？

.container {
  background: blue;
  display: flex;
  justify-content: space-between;
  height: 20px;
  width: 300px;
}
.item{
     width: 4px;
     border-radius: 4px;
     background: black;
}

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

Codepen：https://codepen.io/marcin-sieradzki/pen/XWjGKYx

Answer 1

你可以使用margin-left .item

.item {
      margin-left: 5px;
 }

例子：

.container {
  background: blue;
  display: flex;
  justify-content: space-between;
  height: 20px;
  width: 300px;
}

.item {
  width: 4px;
  margin-left: 5px;     /* add this */
  border-radius: 4px;
  background: black;
}

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