flex: 1等价于flex: 1 1 0，表示可放大、可缩小、基准宽为0，并非简单均分父容器宽度，而是平分剩余空间；真正按比例分配需明确设置flex-basis。
flex布局中用flex属性控制单列宽度和伸缩行为
直接写flex: 1并不等于“均分”，它其实是flex: 1 1 0的简写，表示「可放大、可缩小、基准宽为0」。这意味着所有设了flex: 1的子项会平分剩余空间（不是父容器总宽），而内容本身不占空间时，它们才看起来等宽。
真正按比例分配列宽，得明确设置第三个参数（基准值）：
-
flex: 1 1 200px→ 基准宽200px，再均分剩余空间 -
flex: 2 1 0和flex: 1 1 0搭配 → 前者占2份，后者占1份（因放大权重比为2:1） - 避免只写
flex: 2，它等价于flex: 2 2 0，缩小权重也是2，可能在小屏下被过度压缩
用flex-basis替代width来定义初始列宽
在Flex容器中，给子项设width会被flex-basis覆盖（除非flex值为none）。想稳定控制某列起始宽度，优先用flex-basis：
.col-aside { flex: 0 0 240px; } /* 不放大、不缩小、基准宽240px */
.col-main { flex: 1; } /* 剩余空间全给它 */注意：flex-basis: auto会读取元素自身的width或内容宽度；flex-basis: 0则彻底忽略内容尺寸，纯靠flex-grow分配。
立即学习“前端免费学习笔记（深入）”；
- 响应式中常配合
min-width使用，防止flex-basis过小导致文字换行难看 - IE11对
flex-basis: auto支持不稳定，建议在兼容场景统一用具体数值
处理内容溢出和换行时的常见错觉
很多人发现加了flex: 1后文字撑破容器，以为是Flex没生效——其实是white-space和min-width在作怪。Flex默认不会强制折行，也不会主动收缩内联内容。
- 长单词/URL溢出：加
overflow-wrap: break-word或word-break: break-all - 图片或固定宽元素撑开列：给该元素设
max-width: 100%和height: auto - 子项有
min-width且值过大：Flex无法压缩到比min-width更小，此时flex-shrink: 1也无效
嵌套Flex容器时flex-direction必须显式声明
父容器设display: flex不会自动让子项也变成Flex容器。如果要在某一列内部再分栏（比如右侧主区再分上下两块），必须单独给该列加display: flex并指定方向：
.col-main { display: flex; flex-direction: column; }
.section-top { flex: 1; }
.section-bottom { flex: 0 0 60px; }漏掉flex-direction会导致子项仍按文档流堆叠，看起来像“没生效”。水平分栏用row（默认），垂直分栏必须写column，不能依赖继承。
多层嵌套时，每一层的flex行为都只作用于其直系子元素，父层的flex-grow不会穿透影响孙级宽度。
