CSS flex布局详解

CSS Flex布局是一种高效、灵活的一维响应式布局模型，通过启用display: flex并精准操控主轴与交叉轴上的对齐、分布和换行行为（如flex-direction、justify-content、align-items、align-self、flex-wrap和align-content等核心属性），开发者能轻松实现居中、等距排列、顶部/底部对齐、多行布局等常见且复杂的界面需求——掌握其轴向逻辑与属性协同，即可告别浮动与定位的繁琐，用简洁代码构建现代网页布局。

Flex布局（Flexible Box Layout）是CSS中一种强大的一维布局模型，适合在容器内对子元素进行排列和对齐。它通过设置容器的 display: flex 来启用，主要涉及两个部分：容器（flex container）和项目（flex items）。以下是常见的排列方式及其控制属性。

主轴方向排列（justify-content）

主轴默认是水平方向（从左到右），可以通过 flex-direction 改变。以下属性控制项目在主轴上的对齐方式：

结合 justify-content 可进一步控制主轴上的分布：

• justify-content: flex-start —— 项目靠向主轴起点（默认）
• justify-content: flex-end —— 靠向主轴终点
• justify-content: center —— 居中对齐
• justify-content: space-between —— 两端对齐，项目间间距相等
• justify-content: space-around —— 项目周围留有相等空间
• justify-content: space-evenly —— 所有项目之间和边缘间距完全相等

交叉轴对齐（align-items）

交叉轴垂直于主轴。例如主轴是row时，交叉轴就是垂直方向。以下属性控制项目在交叉轴上的对齐：

• align-items: stretch —— 拉伸以填满容器（默认，除非项目有固定尺寸）
• align-items: flex-start —— 对齐到交叉轴起点
• align-items: flex-end —— 对齐到交叉轴终点
• align-items: center —— 居中对齐
• align-items: baseline —— 项目按基线对齐（适用于文本）

单个项目特殊对齐（align-self）

如果只想调整某个项目的交叉轴对齐方式，可以使用 align-self，它会覆盖容器的 align-items 设置：

• align-self: auto —— 使用父容器的 align-items 值（默认）
• align-self: flex-start / flex-end / center / stretch / baseline —— 单独设置该项目的对齐方式

多行排列与换行（flex-wrap 和 align-content）

当项目过多时，可以用 flex-wrap 控制是否换行：

• flex-wrap: nowrap —— 不换行（默认，可能溢出）
• flex-wrap: wrap —— 换行，下一行在下方
• flex-wrap: wrap-reverse —— 换行，但下一行在上方

当多行存在时，align-content 控制行与行之间的对齐方式（类似 justify-content，但用于交叉轴的行）：

• align-content: stretch —— 行拉伸填满容器
• align-content: flex-start / flex-end / center —— 行整体靠起点、终点或居中
• align-content: space-between / space-around —— 行间均匀分布

基本上就这些常见排列方式。灵活组合这些属性，可以实现大多数现代网页布局需求，比如居中、等分布局、顶部/底部对齐等。关键是理解主轴和交叉轴的关系，以及每个属性作用的方向。不复杂但容易忽略细节。

以上就是《CSS flex布局详解》的详细内容，更多关于CSS,FLEXBOX的资料请关注golang学习网公众号！