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

Question

我正在尝试使用 justify-content: space-around 在 flex box 中水平显示这些图像。

它不起作用，有什么想法吗？

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

为什么 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>

Answer 1

flex 元素将占用其内容的宽度，不会为关键字对齐属性(例如 justify-content)留下额外的空间。

创造一些额外的空间；添加 宽度: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>