页面缩小时如何实现元素弹性收缩并单列排列？

需求：页面宽度缩小时，实现元素弹性收缩并排列为单列，无需完整适配。

调整后的代码 #

HTML（无需修改，保留原结构） #

<!-- Trading -->
<div class="main-container-trading">
    <div class="container-modal-row">
        <div class="modal-row-text">модельный ряд lofthaus</div>
        <div class="container-btn-params">
            <div class="btn-params-text">Подбор дома
                <div class="container-svg-icon-params">
                </div>
            </div>
        </div>
    </div>
    <div class="showcase-houses">
        <div class="container-item">
            <div class="item-1"></div>
            <div class="container-details">
                <div class="model-house">Lofthaus R70</div>
                <div class="price-house">4.465.000 ₽
                    <div class="size-house">70м2</div>
                </div>
                <div class="container-buttons">
                    <div class="btn-more-detailed">
                        <div class="btn-style-more-detailed">Подробнее</div>
                    </div>
                    <div class="btn-presentation">
                        <div class="btn-style-presentation">Презентация
                            <div class="container-svg-icon-pdf">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-item">
            <div class="item-2"></div>
            <div class="container-details">
                <div class="model-house">Lofthaus R70</div>
                <div class="price-house">4.465.000 ₽
                    <div class="size-house">70м2</div>
                </div>
                <div class="container-buttons">
                    <div class="btn-more-detailed">
                        <div class="btn-style-more-detailed">Подробнее</div>
                    </div>
                    <div class="btn-presentation">
                        <div class="btn-style-presentation">Презентация
                            <div class="container-svg-icon-pdf">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-item">
            <div class="item-3"></div>
            <div class="container-details">
                <div class="model-house">Lofthaus R70</div>
                <div class="price-house">4.465.000 ₽
                    <div class="size-house">70м2</div>
                </div>
                <div class="container-buttons">
                    <div class="btn-more-detailed">
                        <div class="btn-style-more-detailed">Подробнее</div>
                    </div>
                    <div class="btn-presentation">
                        <div class="btn-style-presentation">Презентация
                            <div class="container-svg-icon-pdf">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

修改后的CSS #

.main-container-trading {
    background-color: #6a6a6a;
    padding-left: 145px;
}

/* MODAL ROW HEADER */
.container-modal-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;

    border-left: 1px solid #b0b0b0;
    border-right: 1px solid #b0b0b0;

    margin-right: 145px;
    padding: 80px 40px 50px 150px;
}

.modal-row-text {
    color: white;
    font-size: 40px;
    font-weight: 400;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 83px;
}

.container-btn-params {
    display: flex;
    align-self: center;
    height: 40px;
    width: 220px;

    border: 1px solid #c8b197;
    border-radius: 50px;
}

.btn-params-text {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;

    color: white;
    font-size: 20px;
    font-weight: 400;
    font-family: sans-serif;
    line-height: 29px;
}

.container-svg-icon-params {
    display: flex;
    height: 100%;
    align-items: center;
}

/* SHOWCASE HOUSES */
.showcase-houses {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    border-left: 1px solid #b0b0b0;
}

.container-item {
    flex: 1 1 minmax(320px, 100%);
    border-right: 1px solid #b0b0b0;
}

.item-1 {
    width: 100%;
    height: 340px;
    background: url("../images/item-1.jpg") no-repeat;
    background-size: cover;
}

.item-2 {
    width: 100%;
    height: 340px;
    background: url("../images/item-2.jpg") no-repeat;
    background-size: cover;
}

.item-3 {
    width: 100%;
    height: 340px;
    background: url("../images/item-3.jpg") no-repeat;
    background-size: cover;
}

.container-details {
    padding: 35px 40px 40px 40px;
}

.model-house {
    display: flex;
    width: fit-content;

    font-size: 36px;
    line-height: 49px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: white;
    font-weight: 400;
    font-family: sans-serif;
}

.price-house {
    display: flex;
    justify-content: space-between;

    color: white;
    font-weight: 700;
    font-family: sans-serif;
    line-height: 75px;
    font-size: 36px;
}

.size-house {
    color: #DE0D0D;
    font-weight: 700;
    line-height: 78px;
}

.container-buttons {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-top: 10px;
    flex-wrap: wrap;
    gap: 15px;
}

.btn-more-detailed {
    width: 150px;
    height: 55px;
    border: 3px solid #c8b197;
}

.btn-style-more-detailed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    font-family: sans-serif;
    line-height: 18px;
    text-transform: uppercase;
}

.btn-presentation {
    width: 205px;
    height: 60px;

    background-color: #c8b197;
}

.btn-style-presentation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 10px;

    color: #000000;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 18px;
}

.container-svg-icon-pdf {
    display: flex;
}

关键修改说明 #

• 展示容器：给.showcase-houses添加flex-wrap: wrap，允许子元素在空间不足时换行。
• 房屋项：给.container-item设置flex: 1 1 minmax(320px, 100%)，空间充足时所有项平分宽度，不足时占满整行，同时保证最小宽度避免内容挤压。
• 房屋图片：去掉.item-1/.item-2/.item-3的固定宽度，改为width: 100%，让图片自适应容器宽度。
• 辅助优化：给头部容器和按钮容器添加换行与间距，避免小屏幕下元素挤压变形。

内容的提问来源于stack exchange，提问作者TopTTeDHbIu-DeJLbFuH4uk