css巧劲--利用flex+margin实现各类需求场景的小技巧

前言

在 flex 布局中，为子元素设置 margin: auto 后，父元素的剩余空间都会被分给该子元素的margin值中 ， 此时我们就可以利用这个特性利用flex + margin的方式实现一些特殊的业务场景

巧劲一、利用flex布局和margin实现元素居中

<div class="box">  
    <div class="item" style="background-color: navajowhite;"></div>  
</div>

通常，我们想让子元素在父级盒子中居中显示，我们会采用flex布局，主轴侧轴分别居中

/* flex布局，主轴侧轴分别居中 */
display: flex;  
justify-content: center;  
align-items: center;

但是还有一种方法就是，为子元素设置margin:auto;的方式，即可实现元素居中显示

.box {  
    display: flex;
    width: 300px;  
    height: 300px;  
    border: 3px solid red;  
    padding: 10px;  
}  
  
.item {  
    /* 为子元素设置margin:auto; */
    margin: auto;  
    width: 100px;  
    height: 100px;  
}

巧劲二、与上点同理，可实现多种需求

如我们需要实现以下效果，通常会将左边两个item单独放在一个父级盒子中，然后再分别对box1和box2进行flex布局。

若采用flex+margin，此时我们只需要为第三个item设置margin-left: auto;即可实现，并不需要将左边两个item单独设置父级

.item:nth-of-type(3) {  
    margin-left: auto;  
}

但若是实现以下效果呢？同上可得，采用flex + margin，为第三个item设置margin-left: auto;即可实现

.item:nth-of-type(3) {  
    margin-left: auto;  
}

接着看这样的需求，如果需要每个item之间都要有一定的距离隔开，实现每行item平均分配空间，该怎么实现呢？

以上需求如果直接添加margin可能会因为所有子元素的宽度中和超过父级宽从而会导致第一行最后一个放不下而空出一片 “ 净土 ” ，如下图

此时可能会有同学们想使用 justify-content: space-between; ，这个时候又会产生新的问题，第二行 item元素因为数量不够，不足以和上面那行元素一样平分父盒子的剩余空间。

这时候，与上面几个需求的解决方案一样，使用flex + margin即可解决。但是需要注意的是，这个时候需要自己手动计算每个item应该分得的margin数值，此时即可实现以上需求。

.box {  
    display: flex;  
    flex-wrap: wrap;   
    box-sizing: border-box;  
    width: 700px;  
    height: 250px;  
    border: 3px solid red;  
}  
  
.item { 
    width: 100px;  
    height: 100px;  
    /* 此时需要自己手动计算每个item所需要分得的margin数值 */
    /* 父盒子宽度减去6个item元素的总宽度后，除以6则是每个item应得的margin值，再除以2才是左右margin值 */
    margin: 10px calc((100% - 100px * 6) / 6 / 2);  
}

此时如果一行所需要的item数量会因为需求原因经常变动，则可将item数量和margin数值通过变量抽离出来，这样就可以更加方便的对数据进行处理，如下代码

.box {  
    display: flex;  
    flex-wrap: wrap;  
    box-sizing: border-box;  
    width: 700px;  
    height: 250px;  
    border: 3px solid red;  
}  
  
.item {  
    /* item个数 */
    --n: 6;  
    /* 将margin抽离出来 */
    --margin: calc((100% - 100px * var(--n)) / var(--n) / 2);  
    width: 100px;  
    height: 100px;  
    margin: 10px var(--margin);  
}

最后

本篇文章灵感来源于抖音，觉得对自己很有用，所以通过代码和文章记录下来，和大家进行分享。

但本人才疏学浅，文笔拙劣，如有错误，欢迎大家指正。

感谢点赞收藏