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

Question

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

Example

这是我的 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) 时它不会换行。

我该如何解决？

Answer 1

默认情况下，CSS flexbox 不允许元素换行到下一行。但是您可以选择允许使用 CSS 包裹 flex 元素 flex-wrap: wrap;在 flexbox 容器上。

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

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

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

---

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

• > https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• > https://flexboxfroggy.com