flex布局(四)

<div class="grid">
    <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>
###单纯的换行写法
<style>
    .grid {
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
        /* 两端对齐 */
        gap: 10px 10px;
        /* 行间距用gap，列间距用计算 */
    }

    .item {
        /* 计算宽度：假设一行3个，(100% - 2*gap) / 3 */
        width: calc((100% - 20px) / 3);
        background: #2196F3;
        color: white;
        padding: 30px 0;
        text-align: center;
        border-radius: 4px;
    }
</style>

###占位符写法
<div class="grid">
    <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" style="height: 0; padding-top: 0; padding-bottom: 0; border: none;"></div>
    <div class="item" style="height: 0; padding-top: 0; padding-bottom: 0; border: none;"></div>
</div>

<style>
    .grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /* 两端对齐 */
        gap: 10px 0;
        /* 行间距用gap，列间距用计算 */
    }

    .item {
        /* 计算宽度：假设一行3个，(100% - 2*gap) / 3 */
        width: calc((100% - 20px) / 3);
        background: #2196F3;
        color: white;
        padding: 30px 0;
        text-align: center;
        border-radius: 4px;
    }
</style>