：比如图文列表项，每个

可作为flex item。 用

：这类组合常需横向对齐，Flex + 语义标签更合理。

Flex容器与语义标签的配合示例

以下是一个语义清晰且使用Flex布局的导航栏结构：

  
我的网站
  

这里

和

表达了结构含义，Flex仅负责视觉排列，职责分离明确。

立即学习“前端免费学习笔记（深入）”；

提升可访问性的优化建议

即使布局美观，若忽略语义和辅助技术支持，用户体验仍会打折扣。

保持DOM顺序与阅读顺序一致：Flex的order属性可能打乱视觉与屏幕阅读器的读取顺序，慎用。 为交互元素添加适当角色和属性：如导航链接自然具备可访问性，无需额外role，但下拉菜单需补充aria-haspopup等。 避免用Flex创建多列文本内容结构：文章段落应按文档流排列，复杂布局可用

+ CSS Grid更合适。

响应式中的语义与布局分离原则

移动端调整布局时，推荐通过CSS控制显示方式，而非修改HTML结构。

例如一个卡片列表，在桌面端横向排列，移动端堆叠显示：

  
推荐商品
  
    
商品A
    
描述信息…
  
  
    
商品B
    
描述信息…
  

使用

和

表达集合与个体关系，Flex处理尺寸与换行，适配不同屏幕。

基本上就这些。语义化不是标签数量的堆砌，而是结构意图的准确表达。Flex布局只是“怎么摆”，而语义标签回答“这是什么”。两者各司其职，才能构建健壮、易用、可持续维护的网页。