flex布局需明确主轴/交叉轴方向、flex-wrap换行设置及flex三值缩写隐式规则：flex-direction决定justify-content和align-items作用方向，flex-wrap默认nowrap需显式设wrap，flex省略时默认值易误判，align-items不能单独控制子项需用align-self。

Flex布局不是加个display: flex就能自动“居中”“等宽”“换行”的，很多错位、溢出、卡顿问题都源于对主轴/交叉轴逻辑、flex缩写隐式值、或flex-wrap默认行为的误判。

flex-direction决定justify-content和align-items的实际方向

justify-content和align-items不认“左右上下”，只认主轴和交叉轴——而主轴由flex-direction定。写错方向，对齐就全反了。

• flex-direction: row（默认）：主轴水平 → justify-content控左右，align-items控上下
• flex-direction: column：主轴垂直 → justify-content控上下，align-items控左右
• 常见错误：flex-direction: column下还写justify-content: center想“水平居中”，结果所有项目在顶部垂直居中堆叠
• 正确做法：此时要水平居中，必须用align-items: center

flex-wrap默认nowrap，超宽也不换行

卡片列表在小屏上挤成一条细线或直接跑出视口？大概率是忘了设flex-wrap: wrap。它默认值就是nowrap，死扛一行到底。

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

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

下载

• 两行卡片布局？必须显式写flex-wrap: wrap，否则align-content无效，justify-content也只在单行内起作用
• 移动端单列布局，别只靠width: 100%，配合flex-wrap: wrap + flex: 0 0 100%更稳
• 旧版Android WebView对width: 50% + flex-wrap: wrap渲染异常，优先用flex: 0 0 50%

flex是三值缩写，省略时默认值容易踩坑

flex等价于flex-grow flex-shrink flex-basis，顺序固定，省略部分按规则补默认值——但补的值常和直觉相反。

• flex: 1 → 解析为flex: 1 1 0：从0开始均分空间，忽略内容宽度，文字多的项反而被压窄
• flex: 1 0 → 解析为flex: 1 0 0：放大但禁止收缩，小屏易溢出
• flex: auto → flex: 1 1 auto：先按内容占位，再分剩余空间，适合文字长度差异大的场景
• 安全起点：想保持原始尺寸又不放大缩小，用flex: 0 0 auto
• 等宽卡片必须用flex: 1或显式flex-basis: 0；若子项带width，得先清掉，否则flex: 1失效

align-items不能单独控制某个子项

align-items是容器级属性，作用于所有子项。想让第3个卡片顶对齐、其余居中？它做不到。

• 单个项目特殊对齐，必须在对应子项上设align-self，取值同align-items（flex-start、center等）
• align-self优先级高于align-items，冲突时以它为准
• 注意：align-self只在交叉轴生效，主轴对齐仍需靠justify-content或margin（如margin: auto居中单个子项）

真正难的不是记住每个属性名，而是每次写justify-content前先问一句：当前主轴是哪边？flex-wrap有没有开？flex值背后到底展开了什么？这些细节不确认，布局就永远在“差不多”和“差很多”之间反复横跳。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！