纯CSS无法识别Flex换行后的每行首尾，应改用嵌套容器（如.btn-row）或CSS Grid实现；前者通过:first-child/:last-child精准控制每行圆角，后者借助grid布局天然行列模型更可靠。
多行Flex中:first-of-type/:last-of-type失效怎么办
在flex-wrap: wrap容器里，:first-of-type和:last-of-type只匹配DOM顺序上的第一个/最后一个元素，不是视觉上每行的首尾。所以你设了.btn-group button:first-of-type，只会给整个列表的第一个按钮加左圆角，最后一行末尾那个按钮完全不受影响。
真正起作用的是:first-child和:last-child——但它们同样只看HTML结构顺序，不感知换行。除非你手动插入换行标记或用JS重排，否则纯CSS无法“识别第N行的开头/结尾”。
- 别依赖
:nth-child(3n+1)类选择器模拟“每行首项”，列数变化时会错位 - 如果项目数量固定且列数可控（比如始终3列），可用
:nth-child(3n+1)配:nth-child(3n)，但这是硬编码，响应式下极易崩 - 更稳妥的做法：放弃“每行首尾不同圆角”的纯CSS幻想，改用语义化分组
用嵌套容器明确划分“行”边界
Flex本身不提供行级作用域，但你可以用额外的包裹层把每行显式定义出来。例如：
<div class="btn-row"> <button>A</button> <button>B</button> <button>C</button> </div> <div class="btn-row"> <button>D</button> <button>E</button> </div>
然后对每行单独控制：
.btn-row button:first-child { border-radius: 8px 0 0 8px; }
.btn-row button:last-child { border-radius: 0 8px 8px 0; }
.btn-row button:not(:first-child):not(:last-child) { border-radius: 0; }
- 父容器
.btn-row设display: flex，不设flex-wrap（因为每行就几个按钮） - 外层再用
display: flex; flex-direction: column堆叠这些.btn-row，保证垂直间距一致 - 缺点是HTML结构变重，但样式可预测、可调试、无兼容性陷阱
gap + 单行Flex + 每行独立容器更可靠
如果你坚持用单个Flex容器实现多行，又想控制首尾圆角，唯一可行路径是放弃“每行首尾”，转而控制“整体首尾”+“中间间隙”。例如按钮组作为筛选栏，只需第一颗左圆、最后一颗右圆，中间全直角：
.btn-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.btn-group button {
border-radius: 0;
flex: 0 0 calc(33.333% - 8px); /* 假设3列 */
}
.btn-group button:first-child {
border-radius: 8px 0 0 8px;
}
.btn-group button:last-child {
border-radius: 0 8px 8px 0;
}
-
gap替代margin，避免最后一行末尾多出空白 -
flex-basis用calc()减去gap值，确保换行准确 - 注意
border-radius四值顺序：top-left top-right bottom-right bottom-left，别写反 - 旧版Safari需加
-webkit-gap，但:first-child支持良好，无需前缀
为什么不用Grid？它更适合这个需求
Grid天生按行列建模，:first-child和:last-child在单行内依然有效，且gap能稳定控制行列间距。若你本就要做等宽多列布局，直接切Grid更省事：
.btn-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
}
.btn-grid button:first-child { border-radius: 8px 0 0 8px; }
.btn-grid button:last-child { border-radius: 0 8px 8px 0; }
这里first-child和last-child仍指整个网格的首尾项，但配合grid-auto-flow: row（默认），视觉上通常就是首行首项和末行末项。更重要的是：你不需要操心换行时机、flex-shrink冲突、margin塌陷这些Flex特有麻烦。
真正容易被忽略的是：当按钮内容长度差异大时，minmax(120px, 1fr)可能导致某行只塞下2个按钮却留白，此时first-child/last-child又会错位——这种边界情况，没有银弹，得靠@container查询或JS微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
