Question

css flex对齐有点问题。我试图用3列作为页脚。我希望中间的列在容器的中心对齐，而不是第一列和第三列之间的距离相等。第一列应与容器的左侧对齐，第三列应与容器的右侧对齐。我该如何实现？

这里是一个jsFiddle进行演示。我在中间下方添加了一条红线，以进一步说明社交链接如何偏离中心对齐。

<footer>
  <div class="container">
    <p>
    &copy; 2019 Company Name. All rights reserved.
    </p>
    <ul>
      <li><a href="#"><i class="fab fa-facebook"></i></a></li>
      <li><a href="#"><i class="fab fa-instagram"></i></a></li>
      <li><a href="#"><i class="fab fa-twitter"></i></a></li>
    </ul>
    <ul>
      <li><a href="#">Legal</a></li>
      <li><a href="#">Privacy</a></li>
    </ul>
  </div>
</footer>

footer {
  background: #666;
  z-index: 1;
}
footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
}
ul {
  display: flex;
  list-style: none;
}
ul li {
  padding: 0 0.5em;
}

CSS flex，中心对齐项之间有空格

0 个答案: