Chrome中flexbox布局下break-after: always失效问题咨询

你遇到的问题是break-after: always在flex column wrap布局中仅Firefox支持，Webkit内核浏览器（如Chrome）不生效。可以通过以下两种替代方案实现需求：

方案1：改用CSS Grid布局（推荐） #

Grid布局对列的控制更直观，无需额外的break元素，且兼容所有现代浏览器：

* { box-sizing: border-box; }
body { font-family: sans-serif, Helvetica, Arial; font-size: 75%; }
#columns {
  width: 100%;
  display: grid;
  grid-auto-flow: column; /* 元素自动横向排列成列 */
  justify-content: center; /* 整体居中 */
  gap: 20px; /* 替代margin控制元素间距，更简洁 */
}
.testcl {
  min-width: 150px;
  min-height: 150px;
  box-shadow: 0 0 4px 1px #4B5257;
}
.testcl h2 { margin: 0; padding: 4px; font-size: 90% }
.testcl ul { list-style: none; margin: 0; padding: 5px; line-height: 1.8em }

对应的HTML可移除所有.break元素：

<body>
  <div id="columns">
    <div class="testcl">
      <h2>Test</h2>
      <ul>
        <li><a href="https://www.google.com/">Google</a></li>
      </ul>
    </div>
    <div class="testcl">
      <h2>Test</h2>
      <ul>
        <li><a href="https://www.google.com/">Google</a></li>
      </ul>
    </div>
    <div class="testcl">
      <h2>Test</h2>
      <ul>
        <li><a href="https://www.google.com/">Google</a></li>
      </ul>
    </div>
    <div class="testcl">
      <h2>Test</h2>
      <ul>
        <li><a href="https://www.google.com/">Google</a></li>
      </ul>
    </div>
  </div>
</body>

方案2：调整Flex布局结构 #

如果想保留Flex布局，可将flex方向改为row，利用justify-content实现居中，同时移除break元素：

* { box-sizing: border-box; }
body { font-family: sans-serif, Helvetica, Arial; font-size: 75%; }
#columns {
  width: 100%;
  display: flex;
  flex-flow: row wrap; /* 小屏幕自动换行 */
  justify-content: center; /* 整体居中 */
}
.testcl {
  min-width: 150px;
  min-height: 150px;
  box-shadow: 0 0 4px 1px #4B5257;
  margin: 7px 10px;
}
.testcl h2 { margin: 0; padding: 4px; font-size: 90% }
.testcl ul { list-style: none; margin: 0; padding: 5px; line-height: 1.8em }

HTML同样移除.break元素即可。

这两种方案都能在Webkit和Firefox中实现你需要的布局效果，且无需依赖break-after属性。

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