flex布局之多排元素排列,让最后一排从左到右排列

477 阅读1分钟

在工作中遇到个一个问题,使用flex布局对于动态渲染的元素,当要在固定区域内进行多排显示的时候,如果最后一排元素个数不够,在使用justify-content: space-around属性来做自适应时最后一排元素因为剩余大小多,间隔显得很大,如何将这一排的元素从左到右排列,我整理了以下方法。

处理之前

flex_1.png

处理之后

flex_2.png

测试代码

    <div class="main">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>
    .main {
        width: 600px;
        height: 400px;
        margin: 0 auto;
        border: 1px solid red;

        display: flex;
        justify-content: space-around;
        align-content: space-around;
        flex-wrap: wrap;
    }

    .main .item {
        width: 20%;
        height: 36%;
        border: 1px solid blue;
        display: flex;
        justify-content: center;
        align-items: center;
    }

1、使用gird布局

思路:网格布局能够使元素按从左到右排列

        display: grid;
        grid-template-columns: repeat(4,25%); /* 网格数量 */
        grid-template-rows: repeat(2,50%); /* 网格数量 */
        grid-gap: 5px 5px; /* 网格间距 */
        justify-items: center; /* 单元格对齐方式 */
        align-items: center; /* 单元格对齐方式 */

只用网格布局后,子元素的宽高百分比是单元格的百分比。

2、最flex布局中最后一个元素设置margin-right

思路:只需要选中最后一个元素,计算出对应的margin-right的值

.main .item:last-of-type {
        margin-right: 25%;
    }

需要计算间隔所占的大小,如果外面的大盒子是自适应的话,这种方式不太好。

3、添加元素隐藏占位

思路:差几个元素就补几个元素,然后设置隐藏。

.main .item:last-of-type {
        /* opacity: 0; */
        visibility: hidden;
    }

使用在设计好的一排和一共有多少个元素的时候使用。

参考文章:网格布局