如何在缩小屏幕尺寸时通过display:flex实现两个div上下排列

首先修正你代码里的小错误：第二个div的类名写成了container-par，应该和第一个保持一致为container-part，否则样式不会应用到它。

接下来实现响应式上下排列的关键是媒体查询（Media Query），结合flex的flex-wrap: wrap属性，在屏幕尺寸小于设定阈值时，将子元素的宽度设为100%，这样它们就会自动换行上下排列。

完整代码示例：

CSS代码 #

.container{
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    /* 可选：添加gap控制子元素间距 */
    gap: 10px;
}
.container-part{
    width: 50%;
    /* 可选：添加背景色方便查看效果 */
    background-color: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
}

/* 屏幕宽度小于768px时，子元素占满整行 */
@media (max-width: 768px) {
    .container-part {
        width: 100%;
    }
}

HTML代码 #

<div class="container">
    <div class="container-part">
        1
    </div>
    <div class="container-part">
        2
    </div>
</div>

原理说明 #

• flex-wrap: wrap是基础配置，它允许flex容器内的子元素在空间不足时自动换行。
• 默认状态下子元素宽度设为50%，在大屏幕上会并排显示。
• 媒体查询@media (max-width: 768px)会在屏幕宽度小于等于768px时触发，此时将子元素宽度改为100%，每个元素占满一行，自然形成上下排列。

你可以根据需求调整媒体查询的阈值（比如改成600px），或者修改子元素的样式来适配具体场景。

内容的提问来源于stack exchange，提问作者user19251251