Flex行换行布局动态高度元素错位问题及解决方案咨询

预期布局效果：

我当前的实现代码：

HTML代码 #

<div className={$.container}>
    <section className={$.box1}>Box1</section>

    <section className={$.box2}>Box2</section>

    <section className={$.box3}>Box3 can extend</section>

    <section className={$.box4}>Box4 can extend </section>

    <section className={$.box5}>Box5</section>

    <section className={$.box6}>Box6</section>
</div>

CSS代码 #

.container {
    display: flex;
    flex-direction: column;
    position: relative;

    @include laptop-and-larger {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.box1 {
    @include laptop-and-larger {
        flex-basis: 60%;
        order: 1;
    }
}

.box2 {
    @include phone-only {
        display: none;
    }

    @include laptop-and-larger {
        flex-basis: 40%;
        max-width: px(375);
        order: 2;
    }
}

.box3 {
    @include laptop-and-larger {
        flex-basis: 40%;
        max-width: px(375);
        order: 4;
    }
}

.box4 {
    @include laptop-and-larger {
        flex-basis: 60%;
        order: 3;
    }
}

.box5 {
    @include laptop-and-larger {
        flex-basis: 40%;
        max-width: px(375);
        order: 6;
    }
}

.box6 {
    @include laptop-and-larger {
        flex-basis: 60%;
        order: 5;
    }
}

由于Box3和Box4的内容高度动态变化，无法预先确定，导致布局出现错位：

求替代Flexbox的可行解决方案。

方案1：使用CSS Grid布局 #

CSS Grid天生适配二维布局场景，能精准控制元素的行列位置，完全不受元素动态高度影响。

修改桌面端的容器及各盒子样式：

.container {
    display: flex;
    flex-direction: column;
    position: relative;

    @include laptop-and-larger {
        display: grid;
        // 定义列宽：左侧自适应，右侧最大宽度限制为设定值
        grid-template-columns: 1fr minmax(auto, px(375));
        // 直接用区域名定义每个盒子的位置
        grid-template-areas: 
            "box1 box2"
            "box4 box3"
            "box6 box5";
        // 可根据需求添加行列间距
        gap: 20px;
    }
}

.box1 {
    @include laptop-and-larger {
        grid-area: box1;
    }
}

.box2 {
    @include phone-only {
        display: none;
    }

    @include laptop-and-larger {
        grid-area: box2;
    }
}

.box3 {
    @include laptop-and-larger {
        grid-area: box3;
    }
}

.box4 {
    @include laptop-and-larger {
        grid-area: box4;
    }
}

.box5 {
    @include laptop-and-larger {
        grid-area: box5;
    }
}

.box6 {
    @include laptop-and-larger {
        grid-area: box6;
    }
}

• 通过grid-template-areas直接映射元素位置，逻辑直观清晰
• 右侧列用minmax(auto, px(375))保证最大宽度不超限，同时自适应内容高度
• 无论Box3/Box4高度如何变化，Grid都会维持预设的行列结构，不会出现错位

方案2：拆分左右独立容器 #

如果不想使用Grid，可以将布局拆分为左右两个独立容器，左侧放置Box1、Box4、Box6，右侧放置Box2、Box3、Box5，每列内部用Flex垂直排列，互不干扰。

修改HTML结构：

<div className={$.container}>
    <div className={$.leftColumn}>
        <section className={$.box1}>Box1</section>
        <section className={$.box4}>Box4 can extend </section>
        <section className={$.box6}>Box6</section>
    </div>
    <div className={$.rightColumn}>
        <section className={$.box2}>Box2</section>
        <section className={$.box3}>Box3 can extend</section>
        <section className={$.box5}>Box5</section>
    </div>
</div>

修改CSS：

.container {
    display: flex;
    flex-direction: column;
    position: relative;

    @include laptop-and-larger {
        flex-direction: row;
        gap: 20px;
    }
}

.leftColumn {
    @include laptop-and-larger {
        flex-basis: 60%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

.rightColumn {
    @include phone-only {
        display: none;
    }
    @include laptop-and-larger {
        flex-basis: 40%;
        max-width: px(375);
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

// 移除原各盒子的order、flex-basis等布局相关设置，保留其他样式

• 左右列完全独立，各自内部元素垂直排列，高度变化不会互相影响
• 缺点是需要调整原有HTML结构，若项目对DOM结构依赖较强，需评估改动成本

内容的提问来源于stack exchange，提问作者karo-s