flex-wrap:balance与Flex布局均衡排版实例页面

效果：

flex-wrap: balance（取消后为 flex-wrap: wrap）

我的著作 CSS世界 CSS选择器世界 CSS选择器世界第二版 CSS新世界 HTML并不简单

拖拽容器右下角可以改变容器宽度，观察两种换行策略的差异。

代码：

CSS代码：

/* 开关 */
.balance-switch {
   /* 略 */
}
/* 可 resize 的 flex 容器 */
.books {
    width: 520px;
    min-width: 240px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 10px 0 6px;
    padding: 12px;
    border: 1px dashed #a0b3d6;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* 可拖拽右下角改变宽度 */
    resize: horizontal;
    overflow: hidden;
}
.books.balance {
    flex-wrap: balance;
}
/* 圆角背景色标签 */
.books .book {
    flex: none;
    white-space: nowrap;
    line-height: 20px;
    padding: 4px 10px;
    border-radius: 14px;
    color: #34538b;
    background-color: #e0ebf9;
}

HTML代码：

<label class="balance-switch">
    <input type="checkbox" id="balanceSwitch" checked><i></i><span>flex-wrap: balance（取消后为 flex-wrap: wrap）</span>
</label>
<div class="books balance">
    <span class="book">我的著作</span>
    <span class="book">CSS世界</span>
    <span class="book">CSS选择器世界</span>
    <span class="book">CSS选择器世界第二版</span>
    <span class="book">CSS新世界</span>
    <span class="book">HTML并不简单</span>
</div>

JS代码：

const balanceSwitch = document.getElementById("balanceSwitch");
const books = document.querySelector(".books");

balanceSwitch.addEventListener("change", function () {
    books.classList.toggle("balance", this.checked);
});

if (CSS.supports("flex-wrap", "balance") == false) {
    document.getElementById("unsupport").hidden = false;
}