如何用CSS创建行均匀分布、按钮自适应拉伸的按钮数组？

核心问题解决思路 #

• 圆角适配问题：彻底放弃给单个按钮硬编码圆角的逻辑，直接给外层列表容器设置统一圆角，搭配overflow: hidden裁剪内部溢出内容。无论按钮数量多少、窗口如何缩放、换行怎么变化，整体外轮廓都会自动保持大圆角矩形效果，不需要针对单个按钮动态写样式。
• 多行分布不均问题：调整Flex弹性规则，给按钮设置合理的最大宽度限制，避免出现最后一行只剩1个按钮拉伸铺满的效果；按钮自动伸缩填充容器宽度时，每行按钮数量差不超过1，满足大致均等的排布要求。如果需要100%精准的行均分，可以加少量JS辅助计算列数。
• 边框重叠问题：给按钮设置微小负边距，抵消相邻按钮边框叠加导致的双边框问题，保证所有按钮拼接成完整规整的矩形区域。

纯CSS实现代码（满足90%以上使用场景） #

.bar {
    /* 要求的最小宽度 */
    min-width: 150px;
    /* 限制最大宽度为容器的1/2，保证每行至少放2个按钮，不会出现单行孤项 */
    max-width: calc(50% - 2px);
    padding: 10px 0;
    border: 2px solid #000;
    /* 弹性伸缩自动填充剩余空间 */
    flex: 1 1 150px;
    text-align: center;
    line-height: 1.5;
    /* 负边距抵消相邻边框重叠 */
    margin: -1px;
    box-sizing: border-box;
}

#foo {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /* 容器统一设置圆角 */
    border-radius: 20px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

<ul id="foo">
    <li class="bar">Text</li>
    <li class="bar">Text</li>
    <li class="bar">Text</li>
    <!-- 可任意增减按钮数量，无需调整CSS -->
</ul>

纯CSS方案效果 #

• 按钮最小宽度保持150px，宽度足够时自动拉伸铺满整行
• 任何场景下不会出现最后一行仅1个按钮的情况，每行按钮数量差最多1个
• 整体始终保持20px外圆角，边框规整无重叠
• 按钮按原有顺序排列，不会错乱

精准均分增强方案（可选，加少量JS） #

如果需要完全实现“n行排布时每行按钮数量大致均等（如10个排4行时3/3/2/2）”的效果，可以在上述CSS基础上，加一段简单的JS动态计算最优列数，给容器设置CSS变量控制按钮最大宽度：

const navBar = document.querySelector('#foo');
const items = navBar.querySelectorAll('.bar');
const MIN_WIDTH = 150;

function adjustLayout() {
    const containerWidth = navBar.clientWidth;
    const maxCol = Math.floor(containerWidth / MIN_WIDTH);
    const total = items.length;
    const minRow = Math.ceil(total / maxCol);
    // 计算最优列数，保证每行数量差不超过1
    const optimalCol = Math.ceil(total / minRow);
    // 设置按钮最大宽度为容器1/optimalCol
    navBar.style.setProperty('--item-max-w', `calc(${100/optimalCol}% - 2px)`);
}

// 初始化和窗口 resize 时重新计算
adjustLayout();
window.addEventListener('resize', adjustLayout);

对应CSS里的.bar的max-width改成：

max-width: var(--item-max-w, calc(50% - 2px));

这个方案会自动根据容器宽度和按钮总数计算最优列数，完全匹配10个按钮排4行时2行3个、2行2个的均等排布要求。

内容的提问来源于stack exchange，提问作者Some Random Fellow