CSS flex布局中，justify-content 两端对齐换行最后一行左对齐方式

岁月如歌_

已于 2022-06-16 11:51:26 修改

阅读量2.4k

点赞数 2

文章标签： javascript

于 2022-03-23 16:38:10 首次发布

本文链接：https://blog.csdn.net/namechenfl/article/details/123689492

版权

代码：

   ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      li {
        width: 24%;
        height: 100px;
        background-color: skyblue;
        margin-top: 15px;
      }

<ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

想要的效果

实现方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      li {
        list-style: none;
      }
      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      li {
        width: 24%;
        height: 100px;
        background-color: skyblue;
        margin-top: 15px;
      }
      /* 如果最后一行是3个元素 */
      li:last-child:nth-child(4n - 1) {
        margin-right: calc(24% + 4% / 3);
      }
      /* 如果最后一行是2个元素 */
      li:last-child:nth-child(4n - 2) {
        margin-right: calc(48% + 8% / 3);
      }
    </style>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

额外：

如果一行是3个

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  color: #333333;
  font-size: 14px;
  text-align: center;
  margin-bottom: 15px;
  width: 105px;
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
  border: solid 1px #cccccc;
}
/* 如果最后一行是2个元素 */
.item:last-child:nth-child(3n + 2) {
    margin-right: calc((100% - 30%) / 2);
}