小屏幕下flex-direction必须改为column，否则文字挤压、按钮截断；建议默认row，768px内覆盖为column，并检查子项宽高与justify-content设置。
flex-direction 在小屏幕下该不该改成 column
多数响应式布局里，
在桌面端排成一行很自然，但手机竖屏时横向空间严重不足，文字挤在一起、按钮被截断——这时候必须切到
。不是“可以改”，而是“不改就出问题”。
实操建议：
• 默认设为
，在
内覆盖为
• 如果子项本身有固定宽高（比如
），切
后要同步检查
是否导致溢出
• 避免在
下还用
拉开过长空白，尤其当内容项少于 3 个时
flex-wrap 要不要在中屏触发换行
是默认值，适合控件少、宽度富余的场景；但平板横屏（比如 1024px）常出现子项被压缩变形或文字折行错乱——这时开
比强行缩放更可靠。
实操建议：
• 不要在移动端小屏（
）开
，容易让单行按钮变成两行堆叠，破坏操作流
• 中屏（
）加
，同时给子项加
控制每行最多两个
• 若子项含图片，
开启后务必设
，否则图片可能撑破容器
flex-grow 和 flex-basis 怎么配合媒体查询防拉伸失真
在空间不足时会强制拉伸子项，常见后果是文字被压扁、图标比例失调。这不是 flex 本身的问题，而是没结合屏幕尺寸约束基础尺寸。
实操建议：
• 桌面端可设
（即
,
,
）
• 小屏下改用
，禁止拉伸，允许收缩，确保占满整行
• 避免在媒体查询里只改
而忽略
，否则基线丢失，不同屏幕渲染结果不可预测
@media 查询里重设 justify-content 容易踩什么坑
在桌面端让导航栏按钮间距均匀，但小屏下按钮变多、宽度变窄时，两侧留白会吃掉关键可点击区域，甚至把第一个/最后一个按钮挤出视口。
实操建议：
• 小屏统一改用
或
，避免依赖“平均分配”逻辑
• 如果必须保留间距感，用
替代
（注意兼容性：IE 不支持
，需降级为
）
• 别在同一个媒体查询里反复切换
值（比如从
→
→
），人眼会感知跳动，尤其在 iOS Safari 滚动时
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
真正难的不是写几个
，而是每个断点下都要验证
的三个维度（方向、换行、伸缩）是否协同——漏调一个，用户看到的就是错位、溢出或点击失效。
flex-direction: rowcolumnflex-direction: row@media (max-width: 768px)columnwidth: 200pxcolumnheightcolumnjustify-content: space-betweenflex-wrap: nowrapflex-wrap: wrapmax-width: 480pxwrap640px–1024pxflex-wrap: wrapflex-basis: 45%flex-wrapmin-width: 0flex-grow: 1flex: 1 1 250pxflex-grow: 1flex-shrink: 1flex-basis: 250pxflex: 0 1 100%flex-growflex-basisjustify-content: space-aroundjustify-content: flex-startcentergapjustify-contentgapmarginjustify-contentspace-betweencenterflex-end@mediaflex