flex布局最稳，因flex-wrap:wrap支持折行、flex:1 1 calc(33.333%-1rem)实现三列均分且防挤行、min-width:280px防小屏过窄；须用article+h3+p+内联svg语义化结构，单断点max-width:768px切单列，禁用float/inline-block/图标字体。
服务项目展示栏用 flex 布局最稳，别碰 float 或 inline-block
响应式服务卡片栏现在基本靠 display: flex 解决，float 容易塌陷、inline-block 有空隙且对齐麻烦。用 flex 可以一行自动均分、换行可控、移动端适配也直接。
关键点：
-
flex-wrap: wrap允许卡片折行，不加这句超出容器宽度会强行压缩或溢出 -
flex: 1 1 calc(33.333% - 1rem)是三列布局的核心：允许收缩、基础宽度设为三分之一减去间隙，避免因边距导致第四列被挤到下一行 - 所有卡片统一用
min-width: 280px，防止在小屏上缩成一条细线（比如 iPhone 竖屏）
卡片结构必须带语义化标签，别全用 div
搜索引擎和读屏工具依赖语义结构，div 堆砌会让服务项变成“无意义区块”。实际写法里，每个服务项应包裹在 article 里，标题用 h3，描述用 p，图标建议用 svg 内联而非背景图（方便配色和缩放）。
常见错误：
- 把图标塞进
div并用background-image—— 暗色模式下图标消失、无法单独控制尺寸 - 标题用
span或div+font-weight—— 屏幕阅读器读不出层级，SEO 权重丢失 - 没给
article加role="region"和aria-labelledby—— 多卡片时辅助工具无法区分上下文
移动端断点只设一个 @media 就够，别搞复杂媒体查询链
真实项目里，95% 的服务展示栏只需要在 max-width: 768px 这个临界点切单列。再多断点反而增加维护成本，还容易互相覆盖。
实操建议：
- 默认按三列写（桌面端），CSS 里直接写
flex-basis: calc(33.333% - 1rem) - 在
@media (max-width: 768px)里把卡片设为flex-basis: 100%，并移除左右 margin，留上下间距即可 - 别用
em或rem做断点值 —— 浏览器缩放时可能错位，px最可靠
图标字体（如 Font Awesome）慎用，优先选内联 svg
图标字体加载慢、阻塞渲染、颜色控制僵硬，而且一旦 CDN 不可用，图标就变方框。内联 svg 零请求、可直接用 fill 改色、支持伪元素注入。
怎么快速套用：
- 从 Heroicons 或 Icones 复制 SVG 代码，粘贴进 HTML 的
article开头 - 删掉
width/height属性，让 SVG 自适应父容器；加class="icon"统一设尺寸（比如width: 1.5rem; height: 1.5rem;） - 需要悬停变色？直接写
.service-card:hover .icon { fill: #3b82f6; }—— 不用 JS，不触发重排
真正卡住人的地方往往不是布局，而是图标加载失败后整个服务项视觉失衡，或者小屏下单列卡片文字撑破容器——这些得靠 min-width、word-break: break-word 和真实设备预览来验证，不能只看 Chrome 模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
