如何用CSS实现移动端Flex弹性布局-css教程-PHP中文网

移动端flex容器默认不换行，必须显式设置flex-wrap: wrap；单行下align-content无效，justify-content控制主轴、align-items控制交叉轴；子项推荐用flex而非固定width；需注意min-width: 0或flex-basis: 0防止过度压缩。

如何用css实现移动端flex弹性布局

移动端默认不换行，`flex-wrap: wrap` 必须显式设置

Flex 容器在移动端默认是 flex-wrap: nowrap，哪怕子项总宽度明显超出屏幕，也不会自动换行，而是强行压缩每个子项的宽度——这是最常被忽略的坑。尤其在卡片列表、图标导航等场景下，用户看到的是“所有项目挤成一条细线”，而不是预期的多行排列。

必须给容器加 flex-wrap: wrap 才能触发换行逻辑
align-content 在单行下完全无效，只有设了 wrap 后才起作用
如果用 flex-flow: row wrap，相当于同时声明 flex-direction 和 flex-wrap，更简洁

`justify-content` 和 `align-items` 要分清主轴和交叉轴

移动端布局中，很多人误以为 justify-content: center 就能垂直居中，结果只实现了水平居中。根本原因是：主轴默认是 row（横向），justify-content 控制的是水平方向，而垂直居中得靠 align-items: center（控制交叉轴）。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

主轴方向由 flex-direction 决定；移动端常用 row（横排）或 column（竖排，如全屏弹窗）
想让按钮在页面正中间？容器需同时设 justify-content: center + align-items: center
若改用 flex-direction: column，则 justify-content 控制的是垂直方向，align-items 控制水平方向

子项宽度别硬写 `width: 100px`，用 `flex` 更可靠

在不同屏幕宽度下，固定像素宽的子项极易溢出或留白过多。比如四个图标并排，写死 width: 25% 在小屏上可能撑不开，写死 width: 80px 又可能在大屏上显得稀疏。

推荐用 flex: 1 让子项等分剩余空间，天然适配各种屏幕
需要不等比分配？比如一个占 2 份、三个各占 1 份，就用 flex: 2 和 flex: 1
避免同时设 flex 和 width，后者会被前者覆盖，容易引发意料外的尺寸冲突

移动端真机调试时，`min-width` 和 `flex-shrink` 常被低估

在 iOS Safari 或部分安卓 WebView 中，即使写了 flex: 1，子项仍可能被过度压缩到文字折行或图标变形——这是因为默认 flex-shrink: 1 允许收缩，而文本内容有最小渲染宽度。

加 min-width: 0 可解除 flex item 的最小宽度限制，让 flex 真正生效
更稳妥的做法是显式设 flex-shrink: 0 防止压缩，再配合 overflow: hidden 或 text-overflow: ellipsis 处理溢出
注意：iOS 12–14 对 min-width: 0 支持不稳定，必要时可用 flex-basis: 0 替代