如何让中间Div在窗口缩小时换行？响应式布局技术求助

要实现需求的效果，只需对原代码的CSS部分做以下调整：

• 给主容器#mainCont添加换行属性，同时让元素垂直居中
• 让中间容器#middleCont占据剩余空间，并设置内部链接可换行、居中排列
• 优化链接的内边距，适配小窗口

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        #mainCont
        {
            background-color: lightblue;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap; /* 允许容器内元素换行 */
            align-items: center; /* 元素垂直居中 */
            gap: 1rem; /* 元素间添加间距，优化换行后的布局 */
            padding: 0.5rem;
        }
        #middleCont
        {
            background-color: lavender;
            flex: 1; /* 占据左右元素之外的剩余空间 */
            display: flex;
            flex-wrap: wrap; /* 内部链接允许换行 */
            justify-content: center; /* 链接居中排列 */
            gap: 1rem; /* 链接间添加间距 */
            padding: 0.5rem;
        }
        #middleCont a
        {
            padding: 0 1rem; /* 调整内边距，适配小窗口 */
            white-space: nowrap; /* 避免单个链接被拆分换行 */
        }
    </style>
</head>
<body>
    <div id="mainCont">
        <div>Word</div>
        <div id="middleCont">
            <a href="#">link 1</a>
            <a href="#">link 2</a>
            <a href="#">link 3</a>
            <a href="#">link 4</a>
            <a href="#">link 5</a>
        </div>
        <div>Word</div>
    </div>
</body>
</html>

说明：

• flex-wrap: wrap让主容器在空间不足时自动换行，中间容器会落到左右两个Word元素的下方
• flex: 1确保中间容器在窗口足够大时填满中间空间，窗口缩小时自适应宽度
• 给容器和链接添加gap属性，替代固定内边距，让布局更灵活自然
• white-space: nowrap保证单个链接不会被拆分成两行，提升可读性

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