swiper 卡片水平方向上初始位置.
有时候希望向右和屏幕主体内容对齐,实际宽度可能大于主体宽度.
原理是在 swiper 层级做 padding , swiper-wrapper 本身有 transform 效果.
这在现代 Web 布局中是一个非常经典的需求。要实现这种“超过特定宽度后开始增加内边距”的效果，有几种非常优雅的 CSS 实现方案。
方案一：使用 max() 函数 (最推荐)
这是最简洁、现代的写法。利用 max() 函数在 0 和计算值之间取最大值，可以完美实现你的需求。
CSS
.parent { /* 核心逻辑：(总宽度 - 目标内容宽度) / 2 */ padding-inline: max(0px, calc((100% - 1440px) / 2)); }
原理解析：
当屏幕宽度 < 1440px 时：100% - 1440px 会得到一个负数。max(0px, 负数) 会取 0px。此时 Padding 为 0，内容 100% 填充。
当屏幕宽度 > 1440px 时：100% - 1440px 得到正数（剩余空间），除以 2 刚好分配给左右两边。随着屏幕变宽，Padding 会自动变大，内容区域始终卡在 1440px。
方案二：使用 媒体查询 (Media Queries)
如果你需要更好的浏览器兼容性（或者希望逻辑更直观），传统的媒体查询依然非常好用。
CSS
.parent { padding-inline: 0; /* 小于 1440px 时为 0 */ } @media (min-width: 1440px) { .parent { /* 100vw 是视口宽度 */ padding-inline: calc((100vw - 1440px) / 2); } }
方案三：使用容器查询单位 (CQW) 或 变量
如果你在复杂的组件化开发中，可以使用 CSS 变量来统一管理：
CSS
:root { --content-width: 1440px; } .parent { padding-left: calc(max(0px, 100% - var(--content-width)) / 2); padding-right: calc(max(0px, 100% - var(--content-width)) / 2); }
方案对比与建议
| 特性 | max() 方案 | 媒体查询方案 |
|---|---|---|
| 代码量 | 极简（1行） | 较多 |
| 响应速度 | 线性平滑变化 | 线性平滑变化 |
| 兼容性 | 现代浏览器 (Edge/Chrome 79+) | 所有浏览器 |
| 维护性 | 高，修改一个数值即可 | 中，需要维护两个状态 |
💡 为什么不直接用 max-width: 1440px; margin: auto;？
你提到要设置父级的 padding，这通常是因为：
父级背景（如背景色或背景图）需要铺满全屏。
子元素需要根据父级的 Padding 进行对齐，而不是子元素自己居中。
在这种场景下，使用上面提供的 方案一 是目前前端开发中的最佳实践。