学习笔记——弹性布局实现二行四列等分布局

╰半橙微兮° 2022-11-02 13:30 228阅读 0赞

> 在开发过程中，有时会让你将多张图片以2X2或3X3的形式摆放。这里要求任意相邻的两张图片上下和左右之间的间隙相同。

--------------------

# 一.padding-top/margin-top,padding-bottom/margin-bottom #

### 1.代码 ： ###

* { padding: 0; margin: 0; }
    .page-container {
        width: 100%;
        height: 100vw;
        background-color: #F5F5F5;
    }
    .layout-wrapper {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .item {
        flex-shrink: 0;
        width: 24.1%;
        height: 200px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 4px 4px rgba(0,0,0,0.05);
    }
    .item.margin { margin-top: 1.2%; }

### 2.效果图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

### 3.要点： ###

> 当padding-top,padding-bottom.margin-top,margin-bottom的值设为百分比时，计算结果是参照父元素的宽度。
> 
> 这里主要使用了以上知识。

#  二.网格布局 #

### 1.代码 ： ###

* { padding: 0; margin: 0; }
    .page-container {
        width: 100%;
        height: 100vw;
        background-color: #F5F5F5;
    }
    .layout-wrapper {
        width: 80%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: 200px 200px;
        grid-gap: 12px;
    }
    .item {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 4px 4px rgba(0,0,0,0.05);
    }

###  2.效果图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1][]

### 3.要点： ###

> 网格布局能够简单地实现许多复杂地页面布局。非常实用

--------------------

> 在网页编辑中，这种效果比较常用。当然，还可以使用其他方法实现相同效果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221024/efaebd6ee58043aebbda73df33b22ca9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1]: /images/20221024/ebaa6e6282ef4284bba943e30dee27b6.png