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>

代码笔：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>

Flexbox 间距均匀，项目分布

1 个答案: