用 nth-child(even) 实现z字形需对偶数项容器设 flex-direction: row-reverse，配合 justify-content 和 margin 调整；避免用 transform: scalex(-1) 破坏文本流；注意父容器子节点类型干扰，可改用 :nth-of-type(even)；响应式下需在 @media 中重置布局。
怎么用 nth-child(even) 让图片和文字交替排成Z字形
本质不是“反转方向”，而是对偶数项做 flex-direction: row-reverse 或 transform: scaleX(-1)，配合 text-align: right 等微调实现视觉Z字效果。直接改 direction 或 writing-mode 会破坏文本流，不推荐。
- 必须用
display: flex容器，每个图文块是独立div子项 -
nth-child(even)匹配的是第2、4、6…个子元素，不是“偶数类名”或“偶数数据” - 如果图文块里有标题+图片+描述三部分，别试图只反转图片——要反转整个块的布局顺序
CSS里哪些属性真能“翻转”布局方向
flex-direction: row-reverse 最干净：它把主轴起点换到右边，所有子项顺序倒排，且不干扰文本渲染；transform: scaleX(-1) 虽然也能镜像，但会导致中文标点、数字、图标全反向，输入框光标错位，慎用。
- 用
row-reverse时，justify-content的值含义会变（比如flex-start变成贴右） - 若图文块内用了
margin-left: auto居右，row-reverse后得改成margin-right: auto -
transform方案需额外加transform: scaleX(-1)到子元素再翻回来，嵌套深了极易漏
为什么 nth-child(even) 经常不生效
常见原因是父容器里混入了其他类型子节点，比如注释、空格文本节点、或者没写 key 的 Vue/React 列表导致 DOM 结构意外插入元素——nth-child 数的是所有子元素位置，不管类型。
- 检查浏览器开发者工具里父元素的子节点列表，确认第2、4个真是你的图文块
div - 更稳妥的写法是
.item:nth-of-type(even)，它只算同类型（如div）元素 - 如果用 JS 动态插入内容，确保插入时机不会打乱原有顺序，或改用 CSS-in-JS 的条件 class 控制
移动端适配时 Z 字布局容易崩在哪
小屏下图片宽度撑满、文字换行错位，导致 row-reverse 后文字跑到图下方，Z 字变“L 字”。这不是 CSS 写错了，是响应式断点没跟上布局逻辑。
立即学习“前端免费学习笔记（深入）”；
- 别只在大屏设
nth-child(even)，要在@media里整套重写：小屏切回column，取消反转 - 图片用
max-width: 100%+height: auto，避免固定宽高破坏弹性 - 文字块加
hyphens: auto和word-break: break-word，减少因单长词导致的错行
nth-child 表达式立刻变复杂，这时候不如用 JS 控制 class 更直白。 
