flex布局(十)

<div class="responsive-grid">
    <div class="grid-card">
        <h3>卡片 1</h3>
        <p>内容描述</p>
    </div>
    <div class="grid-card">
        <h3>卡片 2</h3>
        <p>内容描述</p>
    </div>
    <div class="grid-card">
        <h3>卡片 3</h3>
        <p>内容描述</p>
    </div>
    <div class="grid-card">
        <h3>卡片 4</h3>
        <p>内容描述反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦</p>
    </div>
    <div class="grid-card">
        <h3>卡片 5</h3>
        <p>内容描述</p>
    </div>
    <div class="grid-card">
        <h3>卡片 6</h3>
        <p>内容描述</p>
    </div>
</div>

<style>
    .responsive-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        padding: 20px;
        background: #f9f9f9;
    }

    .grid-card {
        /* 🔥 核心公式：最小宽度 200px，最大宽度 1fr（均分剩余） */
        flex: 1 1 200px;

        background: white;
        padding: 24px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border: 1px solid #eee;
    }

    /* 视觉效果：每行自动计算能放几个 */
    /* 屏幕宽 700px: 200*3=600，能放 3 个，每个均分剩余 → 约 233px */
    /* 屏幕宽 500px: 200*2=400，能放 2 个，每个均分剩余 → 约 250px */
    /* 屏幕宽 350px: 只能放 1 个，占满整行 */
</style>

这里基础宽度是200px超过每行容量的个数，那么因为flex-wrap: wrap;会自动换行，但是第二行多余的因为flex:1会导致自动填满宽度
如果想第二行正常，那么需要对每个卡片用calc计算值，计算宽度：假设一行3个，(100% - 2*gap) / 3