时间戳

首页 > 解决方案 > 当列溢出div的宽度时如何使列转到下一行

html - 当列溢出div的宽度时如何使列转到下一行

问题描述

我有一个溢出其容器的菜单。如何让溢出的部分从新行开始并留在父元素中？

例子

这是我的 HTML 结构：

<div class="product-menu" style="display: flex;">
    <div class="kolom">
        <h2>Woonkamer</h2>
        <ul>
            <li><a href="woonkamer/gordijnen">Gordijnen</a></li>
            <li><a href="woonkamer/zitzak">Zitzak</a></li>
            <li><a href="woonkamer/bootstickers">Bootstickers</a></li>
            <li><a href="woonkamer/plafondoek">Plafondoek</a></li>
            <li><a href="woonkamer/spanplafond">Spanplafond</a></li>
            <li><a href="woonkamer/vloer-pvc">Vloer PVC</a></li>
            <li><a href="woonkamer/tapijt">Tapijt</a></li>
            <li><a href="woonkamer/schoonloopmat">Schoonloopmat</a></li>
        </ul>
    </div>
    <div class="kolom">
        <h2>Tuin</h2>
        <ul>
            <li><a href="tuin/zitzak">Zitzak</a></li>
            <li><a href="tuin/bbq-schort">BBQ schort</a></li>
            <li><a href="tuin/outdoor-poster">Outdoor poster</a></li>
            <li><a href="tuin/schuttingframe">Schuttingframe</a></li>
            <li><a href="tuin/schuttingdoek">Schuttingdoek</a></li>
            <li><a href="tuin/rode-loper">Rode loper</a></li>
        </ul>
    </div>
    <div class="kolom">
        <h2>Slaapkamer</h2>
        <ul>
            <li><a href="slaapkamer/bootstickers">Bootstickers</a></li>
            <li><a href="slaapkamer/dekbedovertrek">Dekbedovertrek</a></li>
            <li><a href="slaapkamer/sierkussens">Sierkussens</a></li>
            <li><a href="slaapkamer/spanplafond">Spanplafond</a></li>
            <li><a href="slaapkamer/acoustische-panelen">Acoustische panelen</a></li>
            <li><a href="slaapkamer/vol-karton-2mm">Vol karton 2mm</a></li>
        </ul>
    </div>
    <div class="kolom">
        <h2>Keuken</h2>
        <ul>
            <li><a href="keuken/acrylaat">Acrylaat</a></li>
            <li><a href="keuken/theedoek">Theedoek</a></li>
            <li><a href="keuken/tafelkleed">Tafelkleed</a></li>
            <li><a href="keuken/achterwand">Achterwand (spatwand)</a></li>
            <li><a href="keuken/placemats">Placemats</a></li>
        </ul>
    </div>
    <div class="kolom">
        <h2>Kantoor</h2>
        <ul>
            <li><a href="kantoor/schoonloopmat">Schoonloopmat</a></li>
        </ul>
    </div>
</div>

我使用 display flex 从左到右对齐列，但是当溢出父 div ( product-menu) 时它不会转到新行。

我该如何解决？

标签： htmlcssflexbox

解决方案

默认情况下，CSS flexbox 不允许项目换行到下一行。flex-wrap: wrap;但是您可以选择通过在 flexbox 容器上使用 CSS 来允许 flex 项进行换行。

您可以将 HTML 中的第一行替换为：

<div class="product-menu" style="display: flex; flex-wrap: wrap;">

在此更改之后，从设计的角度来看，您的示例看起来并不完美，一些对齐方式已关闭，但我认为这是您的直接障碍。

如果你有兴趣，我强烈推荐这些资源来学习 CSS flexbox：

推荐阅读