flex + margin 妙用

利用 flex + margin 分配间距，简单案例如下，先写一个包裹器，包裹几个元素：

在这里插入图片描述

案例一：

我们给父元素加 flex 布局，子元素加 margin: auto，可以看到子元素上下左右居中显示，当前我们可以利用给父元素 justify-content: center 与 align-items: center 来实现

.wrap {
  width: 500px;
  height: 300px;
  border: 1px #999 solid;
  display: flex;
}
.wrap .item {
	margin: auto auto
}

在这里插入图片描述

案例二：

但是如果我们想实现下面的布局，很显然，当前的dom结构不满足现状，需要给第二个子元素包一层出来，然后利用 flex 布局：
在这里插入图片描述
但是我们利用 flex + margin 可轻松实现，利用auto可自动分配空间

.wrap .item:nth-child(1) {
    background-color: deepskyblue;
}
.wrap .item:nth-child(2) {
    margin: 0 auto; // 第二个子元素 margin
    background-color: deeppink;
}

案例三：

在这里插入图片描述

.wrap .item:nth-child(1) {
    background-color: deepskyblue;
}
.wrap .item:nth-child(2) {
	margin-right: auto;
    background-color: deeppink;
}
.wrap .item:nth-child(3) {
    margin-left: auto;
    background-color: orange;
}
.wrap .item:nth-child(4) {
    background-color: limegreen;
}

案例四：

在这里插入图片描述

.wrap .item:nth-child(1) {
    background-color: deepskyblue;
}
.wrap .item:nth-child(2) {
    background-color: deeppink;
}
.wrap .item:nth-child(3) {
    background-color: orange;
    margin: 0 auto;
}
.wrap .item:nth-child(4) {
    background-color: limegreen;
    margin-right: auto;
}
.wrap .item:nth-child(5) {
    background-color: mediumpurple;
}

案例五：

想实现如下布局，而且他的宽度不固定，在不同的宽度下显示的数量都是不一致的，而且空间自动分配
在这里插入图片描述

我们利用 flex + margin 实现，定义一个 --num变量，不同的场景，只需修改这个变量即可：

    .wrap {
      width: 350px;
      border: 1px #999 solid;
      padding: 10px 0;
      display: flex;
      flex-wrap: wrap;
      --num: 5;
    }
    .wrap .item {
        width: 40px;
        height: 40px;
        border-radius: 1px;
        filter: drop-shadow(0 0 5px #999);
        background-color: palevioletred;
        margin: 5px calc((100% - var(--num) * 40px) / var(--num) / 2)
    }