弹性盒子元素排列左对齐解决方案

方法有多种，但经过实践发现解决的都不完美，通过自己总结，得到一种自己认为理想的解决方案，方法很简单。

通常情况下

在这里插入图片描述

<style>
    .flex-box{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .item{
        width: 24%;
        height: 200px;
        background-color: red;
        margin-bottom: 20px;
    }
</style>
<body>
    <div class="flex-box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

理想布局

在这里插入图片描述

解决方案

<style>
    .flex-box{
        display: flex;
        /* justify-content: space-between; */
        flex-wrap: wrap;
        margin: 0 -0.5%;
    }
    .item{
        width: 24%;
        margin: 0 0.5%;
        height: 200px;
        background-color: red;
        margin-bottom: 20px;
    }
</style>
<body>
    <div class="flex-box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

思路：去掉弹性盒子的justify-content: space-between属性，给每个子元素添加对应的左右百分比外边距，形成元素之间间隔，再给父元素加上负百分比的左右外边距，来抵消左右两侧子元素的边界间隔。

注意：一行中所有子元素外边距加上所有子元素宽度不能大于100%，否则会换行，导致布局错乱。

版权声明：本文为weixin_47883684原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。