CSS问题记录

1.flex-wrap: wrap 之后元素上下间距好大，实际上没有设置间距。

原因：当元素设置了flex-wrap:wrap之后会有一个默认属性 align-content: stretch，元素被拉伸以适应容器。

解决方法： 添加：align-content：flex-start 使元素位于容器的开头。

2.解决多元素多行排列时等边距排列的问题（参考）

.box {
      background-color: gainsboro;
      display: flex;
      flex-wrap: wrap;
      /* justify-content: space-between; */
    }
    .item {
      width: 50px;
      height: 50px;
      border: 2px solid darkslategrey;
      box-sizing: border-box;
      --n: 5; /* 一行几个 */
      --space: calc(100% - var(--n) * 50px); /* 一行减去item的宽度后剩下的间距 */
      --leftRight: calc(var(--space) / var(--n) / 2); /* 每个item左右的间距 */
      margin: 10px var(--leftRight);
    }