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

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

<header style="display: flex; justify-content: space-between; align-items: center; padding: 1rem;">
  <h1>我的网站</h1>
  <n* style="display: flex; gap: 1.5rem;">
    <a href="/home">首页</a>
    <a href="/about">关于</a>
    <a href="/contact">联系</a>
  </n*>
</header>

这里

提升可访问性的优化建议

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

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

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

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

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

AI成像模型，可以从你的照片中生成逼真的4K头像

<section aria-labelledby="products-title" style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <h2 id="products-title">推荐商品</h2>
  <article style="flex: 1 1 30%;">
    <h3>商品A</h3>
    <p>描述信息…</p>
  </article>
  <article style="flex: 1 1 30%;">
    <h3>商品B</h3>
    <p>描述信息…</p>
  </article>
</section>

使用

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