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 设硬边界。