引言
Flex 布局是现代 CSS 最常用的布局方式，几乎每个页面都离不开它。但很多人用的时候是"试出来的"：改一个属性看看效果，不对再换一个。这种用法在简单场景能凑合，一旦布局复杂就容易失控。问题在于没理解 Flex 的几个核心概念。这篇文章只讲 Flex 布局，把它讲清楚。
一、Flex 解决什么问题
在 Flex 出现之前，做水平居中、等高列、剩余空间分配这些事，要靠各种技巧，写起来繁琐且不直观。
Flex 的思路是：把一组元素放进一个容器，由容器统一管理它们的排列、对齐、空间分配。 容器是管理者，里面的元素是被管理者。管理者定规则，被管理者按规则排布。
这个思路把布局从"逐个控制子元素"变成"统一控制容器"，大大简化了常见布局。
二、两个轴的概念
理解 Flex，必须先理解主轴和交叉轴。
主轴是元素排列的方向。默认是水平方向，从左到右。可以改成垂直方向，从上到下。还可以反向。
交叉轴是与主轴垂直的方向。主轴水平时，交叉轴就是垂直；主轴垂直时，交叉轴就是水平。
所有对齐属性，都是围绕这两个轴来定义的。搞清楚当前主轴是哪个方向，才能正确使用对齐属性。很多人对齐属性用错，就是因为没意识到主轴已经变了。
三、容器上的关键属性
容器负责定规则，几个核心属性决定了整体布局。
排列方向决定主轴朝向，也就决定了元素是横着排还是竖着排。
换行行为决定元素排不下时怎么办。默认是不换行，元素会被压缩；可以改成换行，排不下就另起一行。
主轴对齐决定元素在主轴方向上怎么分布：靠起点、靠终点、居中、两端对齐、均匀分布。这是最常用的属性之一，水平居中、两端对齐都靠它。
交叉轴对齐决定元素在交叉轴方向上怎么对齐：拉伸、起点、终点、居中、基线对齐。垂直居中就靠它。
多行对齐在换行之后生效，决定多行之间怎么分布。
这几个属性组合起来，能覆盖绝大多数常见布局需求。
四、子元素上的关键属性
子元素也可以有自己的规则，覆盖容器的统一安排。
伸缩比例决定剩余空间怎么分。容器有剩余空间时，按比例分配给子元素。这是实现"自适应宽度"的核心。
基础尺寸决定分配空间前的初始大小。
固定尺寸决定元素是否可以被压缩或拉伸。设成不可伸缩，它就保持原尺寸，不参与空间分配。
自身对齐可以让某个子元素在交叉轴上单独对齐，不受容器统一规则约束。
排列顺序可以改变子元素的显示顺序，而不改动 HTML 结构。这在响应式布局里很有用。
五、为什么元素没按预期排列
第一，主轴方向搞错了。 你以为在调水平对齐，其实主轴是垂直的，属性作用在了另一个方向。先确认主轴，再调对齐。
第二，忘了换行。 元素太多排不下，默认不换行，于是被压缩得变形。想要多行，必须显式开启换行。
第三，伸缩比例冲突。 多个子元素都设了伸缩比例，但基础尺寸不同，最终宽度不一定是你以为的比例。要理解"剩余空间按比例分"，而不是"总宽度按比例分"。
第四，固定尺寸阻止了压缩。 某个子元素设了不可压缩，空间不够时它不缩，其他元素就只能缩得更狠，布局就失衡了。
第五，对齐属性用在了错误的轴上。 主轴对齐和交叉轴对齐是两套属性，用混了就没效果。
排查时，开发者工具可以高亮显示 Flex 容器的轴和子元素的尺寸，非常直观。
六、Flex 的适用与不适用
适合：一维布局，即一行或一列的排列。导航栏、按钮组、卡片内部结构、垂直居中、两端对齐，这些用 Flex 非常顺手。
不太适合：二维布局，即同时需要控制行和列。比如整个页面的网格结构，用 Grid 更合适。Flex 也能做，但会绕。
也不适合：内容高度差异极大、需要严格对齐的场景。Flex 的交叉轴对齐基于行，行内元素高度不同时，对齐效果可能不符合预期。
理解工具的边界，才不会拿着锤子看什么都像钉子。
七、常见组合套路
水平垂直居中：容器设主轴和交叉轴都居中，一步到位。这是 Flex 最经典的用法。
两端对齐的导航栏：容器设主轴两端对齐，左边放 logo，右边放菜单。
等宽列：子元素都设相同的伸缩比例，剩余空间均分，自动等宽。
固定侧边栏加自适应主区：侧边栏设固定尺寸且不可伸缩，主区设伸缩比例为 1，自动占满剩余空间。
底部固定：容器设垂直方向，主内容区伸缩比例为 1，底部栏自然被推到底部。
这些套路覆盖了大部分日常布局，记住它们能省很多试错时间。
八、总结
Flex 布局的核心是：容器定规则，子元素按规则排布；主轴和交叉轴决定对齐方向；伸缩比例决定空间分配。元素没按预期排列，通常是轴搞错、忘了换行、比例冲突或固定尺寸干扰。理解这些概念，你就能从"试出来"变成"算出来"，布局时心里有数。这是现代 CSS 布局最值得投入的一课。