html - CSS Flexbox 中的分栏符

Question

我应该设置哪些 CSS 属性，以便列将用预先确定的分栏符和排序进行换行？

这些列将包含动态和可变高度的项目（因此不能在 CSS 中指定它们的高度）。

各种宽度的所需响应式布局

不成功的尝试

（我之前尝试使用 Grid layout 来做到这一点，但这不起作用，因为我没有严格的行高。）

我现在正在尝试使用 来执行此操作display: flex，但它在大多数浏览器中的行为并不符合我的要求。一个例子：

header {
    height: 2.0rem;
    background: PeachPuff;
}
footer {
    height: 2.0rem;
    background: PaleGreen;
}

header,
footer,
section.app-column {
    padding: 1.0rem;
}
section.app-column {
    display: inline-block;
    flex: none;
    page-break-inside: avoid;
    break-inside: avoid;
    width: 150px;
    margin-right: 0.5rem;
}

section#main section#app-column-primary {
    background: Cyan;
}
section#main section#app-column-secondary {
    background: Thistle;
}
section#main section#app-column-tertiary {
    background: Coral;
}

section#main {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

@media (max-width: 199px) {
    section#main {
        content: "<p>This application requires a wider graphical display.</p>";
    }
    section.app-column {
        display: none;
    }
}

@media (min-width: 200px) and (max-width: 399px) {
    section#app-column-primary { order: 1; }
    section#app-column-secondary { order: 2; }
    section#app-column-tertiary { order: 3; }
    section.app-column {
        page-break-before: avoid;
        break-before: avoid-column;
    }
}

@media (min-width: 400px) and (max-width: 599px) {
    section#app-column-primary { order: 1; }
    section#app-column-secondary { order: 3; }
    section#app-column-tertiary { order: 2; }
    section.app-column {
        page-break-before: always;
        break-before: column;
    }
    section#app-column-tertiary {
        page-break-before: avoid;
        break-before: avoid-column;
    }
}

@media (min-width: 600px) {
    section#app-column-primary { order: 1; }
    section#app-column-secondary { order: 2; }
    section#app-column-tertiary { order: 3; }
    section.app-column {
        page-break-before: always;
        break-before: column;
    }
}

<header>Header ipsum, dolor sit amet.</header>
<section id="main">
    <section class="app-column" id="app-column-primary">
        Primary column
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </section>
    <section class="app-column" id="app-column-secondary">
        Secondary column
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Curabitur ac ornare justo. Sed vitae rhoncus nibh. Phasellus
        venenatis, quam eu rutrum porta, velit dolor fermentum elit, eu
        faucibus sapien ipsum in leo.
    </section>
    <section class="app-column" id="app-column-tertiary">
        Tertiary column
        <br />Lorem ipsum dolor sit amet.
    </section>
</section>
<footer>Footer ipsum, dolor sit amet.</footer>

Firefox 中的正确结果

Firefox 正确解释了请求的break-before属性。例如，在 2 列中：

Webkit 和 Chrome 无法分栏

但是 Chrome（和 Webkit 浏览器）错误地拒绝插入分栏符：

请注意，CanIUse 告诉我page-break-before应该给出我想要的行为。然而，这个例子仍然失败，page-break-before在正确的地方。

如何在所有支持 Flexbox 的浏览器中获得正确的结果？

标签： htmlcssflexbox