css如何通过Flexbox实现分栏布局_利用flex布局分配列宽和空间

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不会穿透影响孙级宽度。