CSS Flexbox中的分栏符

Question

我应该设置哪些CSS属性，以使列以预定的分行符和顺序包裹？

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

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

尝试失败

（我以前是attempted to do this with 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属性。例如，在两列之间：

Webkit和Chrome无法中断列

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

请注意，CanIUse tells me that page-break-before should给出了我想要的行为。但是，此示例仍然失败，page-break-before在正确的位置。

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