Flex容器需显式声明display: flex或inline-flex，否则子项样式无效；flex-wrap: wrap实现换行自适应；慎用flex: 1（即flex: 1 1 0），推荐flex: 1 1 auto保留内容宽度；移动端优先用flex-direction: column配合媒体查询切换布局。
flex 容器必须显式声明 display: flex 或 display: inline-flex
很多初学者写完 flex-direction 或 justify-content 却没效果，根本原因是父容器没启用 Flex 上下文。CSS 不会自动把普通块级元素变成弹性容器。
常见错误场景：
- 只写了子元素的
flex: 1，但父元素仍是display: block - 在旧版浏览器（如 IE10）中用了
display: -ms-flexbox却漏掉标准声明
正确做法是始终优先写标准声明，并按需加前缀：
header {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
}
flex-wrap: wrap 是实现「换行自适应」的关键开关
默认情况下 flex 容器不换行，所有子项强行挤在同一行，导致内容溢出或缩放失真。响应式布局中，必须主动开启换行能力。
立即学习“前端免费学习笔记（深入）”；
使用条件：
- 子项总宽度可能超过容器（比如卡片列表、导航菜单）
- 需要在小屏上纵向堆叠，在大屏上横向铺开
- 配合
min-width或flex-basis控制单个子项最小尺寸
典型组合：
.grid {
display: flex;
flex-wrap: wrap;
}
.grid > * {
flex: 1 1 280px; /* 可伸缩、可收缩、基准宽 280px */
}慎用 flex: 1 替代 flex: 1 1 0，否则可能破坏最小内容宽度
flex: 1 是 flex: 1 1 0 的简写，其中第三个值 0 表示 flex-basis: 0。这会让浏览器忽略子元素自身内容宽度（比如文字长度、图片固有尺寸），强制从零开始分配空间。
容易踩的坑：
- 按钮文字被压缩到看不清
- 带图标的导航项图标和文字错位
- 表格式布局中列宽严重失衡
更安全的写法（保留内容自然尺寸）：
.nav-item {
flex: 1 1 auto; /* auto 会尊重内容宽度 */
}
/* 或者明确设一个合理基准值 */
.card {
flex: 1 1 300px;
}
移动端适配时，flex-direction: column 配合媒体查询比 JS 更轻量可靠
不要在 JavaScript 里监听 resize 改 class 来切布局方向。纯 CSS 媒体查询 + flex-direction 切换更稳定，也避免 FOUC 和 SSR 不一致问题。
注意点：
- 移动端优先：默认设为
column，大屏用@media (min-width: 768px)切回row - 避免在同一个断点反复切换
flex-direction和flex-wrap，易引发重排抖动 - 如果子项有固定高度（如 banner 图），记得在
column下重置height或用min-height
示例结构：
.layout {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.layout {
flex-direction: row;
}
}实际项目中最常被忽略的是 flex-basis 和 min-width 的协同控制——光靠 flex 缩放无法阻止极端窄屏下文本折行混乱或图标挤压变形，得配合 min-width 或 max-width 设硬边界。
