html - 证明内容不能在元素之间创建空间

我正在尝试在justify-content: space-around的弹性框中水平显示这些图像。

它行不通，有什么想法吗？

我能够以一定间隔显示它的唯一方法是填充。

justify-content为什么不起作用？

h3 {
  font-weight: lighter;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 10px 0;
  font-family: Proxima Nova;
  letter-spacing: 1.92px;
  color: #FFFFFF;
  opacity: 0.7;
}

.flex-container {
  flex-direction: column;
  display: flex;
  width: 100vw;
  height: auto;
}

.trusted-by-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  top: 781px;
}

<div class="trusted-by-container">
  <div class=t itle>
    <h3>TRUSTED BY</h3>
  </div>
  <ul class="trusting-companies-container">
    <li class="company-item"><img src="./images/monday.svg" alt="monday" </li>
      <li class="company-item"><img src="./images/intel.svg" alt="intel" </li>
        <li class="company-item"><img src="./images/johnson.svg" alt="johnson" </li>
          <li class="company-item"><img src="./images/handy.svg" alt="handy" </li>
            <li class="company-item"><img src="./images/flexport.svg" alt="flexport" </li>
  </ul>
</div>

最佳答案

Flex项将采用其内容的宽度，不留多余空间供关键字对齐属性（例如justify-content）使用。

创建一些额外的空间；添加width: 100%。 （此外，关闭您的img元素。）

h3 {
  font-weight: lighter;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 10px 0;
  font-family: Proxima Nova;
  letter-spacing: 1.92px;
  color: #FFFFFF;
  opacity: 0.7;
}

.flex-container {
  flex-direction: column;
  display: flex;
  width: 100vw;
  height: auto;
}

.trusted-by-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  top: 781px;
}

.trusting-companies-container {
  width: 100%; /* new */
  display: flex;
  justify-content: space-around;
}

<div class="trusted-by-container">
  <div class=t itle>
    <h3>TRUSTED BY</h3>
  </div>
  <ul class="trusting-companies-container">
    <li class="company-item"><img src="./images/monday.svg" alt="monday"></li>
    <li class="company-item"><img src="./images/intel.svg" alt="intel"></li>
    <li class="company-item"><img src="./images/johnson.svg" alt="johnson"></li>
    <li class="company-item"><img src="./images/handy.svg" alt="handy"></li>
    <li class="company-item"><img src="./images/flexport.svg" alt="flexport"></li>
  </ul>
</div>

关于html - 证明内容不能在元素之间创建空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59569981/