Flexbox布局：页面宽度不足时将第二页面移至下方

DevOps 小满

2026-7-16

问题描述

当前页面使用flex布局容纳两个.page容器，当页面宽度不足以同时容纳两个容器时，容器会被压缩而非自动换行。需求是：宽度不足时第二个.page自动移至第一个下方，且表格第三列固定10em宽度不被压缩。

解决方案

只需对flex布局做两处关键修改即可实现需求：

给父容器#pages添加flex-wrap: wrap，开启自动换行功能
给子容器.page设置flex-shrink: 0，禁止容器被压缩，保留其原有宽度

同时修正.page样式中重复的display: flex声明，移除冗余代码。

修改后的完整代码

CSS

div#pages {
    display: flex;
    gap: 1em;
    flex-wrap: wrap; /* 开启自动换行 */
}
div.page {
    border-color: gray;
    border-width: 1px;
    display: flex;
    padding: 1em;
    gap: 1em;
    flex-shrink: 0; /* 禁止容器被压缩 */
}
div.page, td {
    border-style: solid;
}
table {
    border-collapse: collapse;
}
td  {
    border-color: silver;
    border-width: 1px;
    font-size: initial;
}
tr td:nth-of-type(1), tr td:nth-of-type(2) {
    width: auto;
}
tr td:nth-of-type(3) {
    width: 10em;
    white-space: nowrap; /* 可选：防止第三列内容换行 */
}

HTML

<div id="pages">
    <div class="page">
        <table>
            <tr><td>A</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>

            <tr><td>B</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>C</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>D</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>E</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
        </table>

        <table>
            <tr><td>F</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>G</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>H</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>I</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>L</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
        </table>
    </div>

    <div class="page">
        <table>
            <tr><td>M</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>

            <tr><td>N</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>O</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>P</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>R</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
        </table>

        <table>
            <tr><td>S</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>T</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>U</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>X</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>Z</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td>Q</td><td>u</td><td></td></tr>
        </table>
    </div>
</div>

<pre>
      K -> C
J and Y -> I
V and W -> U
     Qu -> Zu
</pre>

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

Flexbox布局：页面宽度不足时将第二页面移至下方

CSS #

HTML #

CSS

HTML