Flex 布局核心属性详解教程

弹性 Flex 布局是当下网页开发最主流的排版方案。今天我们重点讲解两个必学核心属性：align-items（交叉轴对齐方式）、flex-direction（主轴排列方向）。所有案例均在浏览器实测通过，配套原理示意图与页面运行效果图，适合课前复习、课后巩固前端布局基础。

第一部分 align-items：5 种交叉轴对齐规则
属性作用

align-items 写在 flex 父容器样式中，专门控制所有子元素在交叉轴上的垂直摆放位置。默认交叉轴走向为自上而下，所有取值均基于该逻辑生效。
一共包含 5 种对齐模式：
1）flex-start
元素紧贴容器顶部。即便各个子块高度不同，所有元素的上边缘会对齐在同一水平线。参考效果图可以看到，短、中、高三个绿色方块全部贴紧粉色容器的上边框。
2）flex-end
与上一种效果完全相反，所有元素靠容器底部对齐，所有方块的下边缘保持齐平。
3）center
经典垂直居中效果。无论每个子块自身高度多大，所有元素的中心都会和容器垂直中线重合，是开发中最常用的居中方案，常用于卡片、按钮、文字居中场景。
4）baseline
文字基线对齐。如果方块内部带有文字，所有文字会统一落在同一条水平基准线上，方块本身高度不会影响文字对齐；容器内无文字时，视觉效果和 flex-start 几乎无差别。
5）stretch（属性默认值）
若不给子元素设置固定高度，方块会自动拉伸填满父容器全部垂直高度，上下不会留有空白间隙。

实操实现思路
为直观展示 5 种取值区别，我分别创建了 5 个尺寸完全一致的容器（宽 1000px，高 100px）。每个容器内放置 3 个宽度不同、高度固定的绿色方块；唯独 stretch 案例移除了子元素固定高度，以此触发自动拉伸效果。baseline 案例中每个方块添加了文字 text，清晰展示基线对齐的特征。
最终效果图从上至下依次展示 5 种模式，可直观对比每种对齐方式的视觉差异。

第二部分 flex-direction：控制主轴排列方向
属性作用

主轴是 flex 子元素排布的基准轴线，flex-direction 可以修改主轴为横向 / 纵向，同时调整元素正序、倒序排列，共 4 种可选值。
1）row（默认值）
主轴为水平横向，起点在容器左侧，元素从左到右按书写顺序正常排列：1、2、3、4。
2）row-reverse
主轴依旧横向，但起点切换至容器右侧，元素整体倒序展示，从右往左排列：4、3、2、1。
3）column
主轴改为垂直纵向，起点在容器顶部，元素从上到下竖向排成一列，顺序不变：1→2→3→4。
4）column-reverse
纵向主轴，起点在容器底部，元素上下倒序，最上方显示数字 4，最下方为数字 1。

实操实现思路
我制作了四组演示容器：横向 row、row-reverse 上下排布；纵向 column、column-reverse 并排摆放，方便对比观察。所有子元素添加flex:1，自动均分容器剩余空间，方块之间无多余空白。
成品效果图能清晰区分正向、反向横向 / 纵向布局的视觉差别。

很抱歉图片画质不太好，图片都做了裁切，没办法上传完整原图，还请见谅。