Web front-end uses elasticity and margins for web page layout, very useful tips, flex, margin, auto

---

renderings

The effect in the picture only requires flex and margin.

---

---

html

<div class="w_100_ d_f h_168 p_6 bc_c0c0c0">
    <div class="w_50 h_50 bc_e75f57 m_a"></div>
</div>

<div class="w_100_ d_f p_6 mt_20 bc_c0c0c0">
    <div class="w_50 h_50 bc_e75f57"></div>
    <div class="w_50 h_50 bc_f2b64c"></div>
    <div class="w_50 h_50 bc_55bd4c ml_a"></div>
</div>

<div class="w_100_ d_f p_6 mt_20 bc_c0c0c0">
    <div class="w_50 h_50 bc_e75f57"></div>
    <div class="w_50 h_50 bc_f2b64c"></div>
    <div class="w_50 h_50 bc_55bd4c ml_a"></div>
    <div class="w_50 h_50 bc_e75f57"></div>
</div>

<div class="w_100_ d_f p_6 mt_20 bc_c0c0c0">
    <div class="w_50 h_50 bc_e75f57"></div>
    <div class="w_50 h_50 bc_f2b64c"></div>
    <div class="w_50 h_50 bc_55bd4c ml_a mr_a"></div>
    <div class="w_50 h_50 bc_e75f57"></div>
</div>

<div class="w_100_ d_f p_6 mt_20 bc_c0c0c0">
    <div class="w_50 h_50 bc_e75f57"></div>
    <div class="w_50 h_50 bc_f2b64c ml_a mr_a"></div>
    <div class="w_50 h_50 bc_55bd4c ml_a mr_a"></div>
    <div class="w_50 h_50 bc_e75f57"></div>
</div>

<div class="w_100_ d_f p_6 mt_20 bc_c0c0c0">
    <div class="w_50 h_50 bc_e75f57"></div>
    <div class="w_50 h_50 bc_f2b64c ml_a"></div>
    <div class="w_50 h_50 bc_55bd4c ml_a"></div>
    <div class="w_50 h_50 bc_e75f57 ml_a"></div>
</div>

<div class="w_100_ d_f fw_w p_6 mt_20 bc_c0c0c0">
    <div class="item w_50 h_50 bc_e75f57"></div>
    <div class="item w_50 h_50 bc_f2b64c"></div>
    <div class="item w_50 h_50 bc_55bd4c"></div>
    <div class="item w_50 h_50 bc_e75f57"></div>
    <div class="item w_50 h_50 bc_f2b64c"></div>
    <div class="item w_50 h_50 bc_55bd4c"></div>
    <div class="item w_50 h_50 bc_e75f57"></div>
    <div class="item w_50 h_50 bc_f2b64c"></div>
    <div class="item w_50 h_50 bc_55bd4c"></div>
    <div class="item w_50 h_50 bc_e75f57"></div>
    <div class="item w_50 h_50 bc_f2b64c"></div>
    <div class="item w_50 h_50 bc_55bd4c"></div>
    <div class="item w_50 h_50 bc_e75f57"></div>
    <div class="item w_50 h_50 bc_f2b64c"></div>
    <div class="item w_50 h_50 bc_55bd4c"></div>
    <div class="item w_50 h_50 bc_e75f57"></div>
</div>

---

css

.item {
    
    
    --n: 7;
    --gap: calc((100% - 50px * var(--n)) / var(--n) / 2);
    margin: 10px var(--gap);
}

---

parse

1. d_f：display: flex;
2. fw_w：flex-wrap: wrap;
3. m_a：margin: auto;
4. ml_a： 4 , other class names basically know the meaning by seeing the name, without going into too much description 3. The item class name is special, so it is defined separately, involves variables, and does not belong to the public stylemargin-left: auto;
5. mr_a:margin-right: auto;