Flexbox通过设置容器display: flex，利用主轴与交叉轴进行布局，使用justify-content和align-items等属性实现项目对齐与分配，结合flex-grow、flex-shrink等控制伸缩，高效完成响应式排列。
Flexbox（弹性盒子布局）是 CSS3 中一种全新的布局模式，专门用来更高效地在容器内分配空间、对齐和排列子元素，尤其适合响应式设计。它解决了传统布局方式（如浮动、定位）在处理复杂对齐与自适应方面的不足。下面从基础概念到常用属性进行详细说明。
flex 容器与 flex 项目
使用 Flexbox 前，需明确两个核心概念：
- flex 容器（flex container）：给父元素设置 display: flex 或 display: inline-flex 后，该元素就成为弹性容器。
- flex 项目（flex items）：容器内的直接子元素自动成为 flex 项目，会沿主轴方向排列。
div.container {
display: flex;
}
主轴与交叉轴
Flexbox 是基于方向的布局模型，有两个关键轴：
- 主轴（main axis）：flex 项目默认沿此轴排列，方向由 flex-direction 决定。
- 交叉轴（cross axis）：垂直于主轴的方向。
理解这两个轴是掌握对齐属性的基础。
立即学习“前端免费学习笔记（深入）”；
常用容器属性
这些属性应用于 flex 容器，控制整体布局行为。
1. flex-direction定义主轴方向，决定项目的排列方式：
- row（默认）：从左到右水平排列。
- row-reverse：从右到左。
- column：从上到下垂直排列。
- column-reverse：从下到上。
定义项目在主轴上的对齐方式：
- flex-start：靠主轴起点对齐（默认）。
- flex-end：靠主轴终点对齐。
- center：居中对齐。
- space-between：两端对齐，项目间间距相等。
- space-around：每个项目周围有相等间距。
- space-evenly：所有项目间及边缘间距完全相等。
定义项目在交叉轴上的对齐方式（单行）：
- stretch（默认）：拉伸填满容器（忽略 min/max-width）。
- flex-start：顶部对齐。
- flex-end：底部对齐。
- center：居中对齐。
- baseline：按文本基线对齐。
控制是否换行：
- nowrap（默认）：不换行，可能溢出。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
多行时控制行与行在交叉轴上的对齐方式（类似 justify-content）：
- 常见值包括 stretch、center、flex-start 等。
- 单行布局中无效。
常用项目属性
这些属性设置在 flex 项目上，控制个体行为。
1. flex-grow定义项目的放大比例，默认为 0（不放大）。
- 设为 1 表示占据剩余空间；多个项目同时设为 1，则平均分配。
定义项目的缩小比例，默认为 1（空间不足时缩小）。
- 设为 0 表示不缩小，可能溢出容器。
设置项目在分配多余空间前的初始主轴尺寸，类似 width。
- 可设为 auto（根据内容）、200px 等具体值。
是 flex-grow、flex-shrink、flex-basis 的简写。
- 推荐用法：flex: 1 相当于 flex: 1 1 0，常用于均分空间。
- flex: auto 表示可伸缩且基于内容大小。
允许单个项目覆盖 align-items 的设置。
- 取值同 align-items，如 center、flex-end。
基本上就这些。掌握 flex 容器和项目的这几个关键属性，就能应对大多数布局需求。实际开发中，先设 display: flex，再通过 justify-content 和 align-items 快速居中或对齐，再用 flex 控制伸缩，非常直观高效。
