Flex布局（Flexible Box Layout）是CSS3中用于创建灵活、响应式容器的布局方式，能让容器内元素自动适应空间变化，常用于一维（行或列）布局。
核心概念
-
容器（Flex Container）：设置display: flex或display: inline-flex的元素，内部元素自动成为flex项目。
-
主轴（Main Axis）：默认从左到右（可通过flex-direction修改方向），元素沿主轴排列。
-
交叉轴（Cross Axis）：与主轴垂直，默认从上到下，元素沿交叉轴对齐。
容器（父元素）的主要属性
- flex-direction：定义主轴方向
• row（默认）：水平从左到右。
• row-reverse：水平从右到左。
• column：垂直从上到下。
• column-reverse：垂直从下到上。
- justify-content：主轴上的对齐方式
• flex-start（默认）：元素靠主轴起点排列。
• flex-end：元素靠主轴终点排列。
• center：元素居中排列。
• space-between：元素间距相等，首尾贴边。
• space-around：元素两侧间距相等（中间间距是两边的2倍）。
• space-evenly：元素间距完全相等。
- align-items：交叉轴上的对齐方式
• stretch（默认）：元素拉伸至容器高度（需元素未设置高度）。
• flex-start：元素靠交叉轴起点排列。
• flex-end：元素靠交叉轴终点排列。
• center：元素交叉轴居中。
• baseline：元素基于文本基线对齐。
- flex-wrap：控制元素是否换行
• nowrap（默认）：不换行，元素可能溢出容器。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。
- align-content：多行元素在交叉轴的对齐（需flex-wrap: wrap）
• flex-start：多行靠交叉轴起点。
• flex-end：多行靠交叉轴终点。
• center：多行居中。
• space-between：行间距相等，首尾贴边。
• space-around：行两侧间距相等。
• stretch：行拉伸至填满容器。
项目（子元素）的主要属性
- flex-grow：定义元素放大比例（默认0，不放大）
• 若所有项目flex-grow为1，则等比例占据剩余空间。
• 示例：flex-grow: 2的元素占据空间是flex-grow: 1的2倍。
- flex-shrink：定义元素缩小比例（默认1，会缩小）
• 设为0时，元素不随容器缩小而缩小。
- flex-basis：定义元素在主轴上的初始尺寸
• 默认为auto（根据内容或width/height确定），可设为具体值（如200px）。
- flex：flex-grow、flex-shrink、flex-basis的缩写
• 常用写法：flex: 1（等价于flex: 1 1 0%，元素等比例放大缩小）。
- align-self：单独设置某元素在交叉轴的对齐方式
• 可覆盖容器的align-items，值包括auto、flex-start、flex-end、center、stretch。
简单示例 /* 容器样式 / .flex-container { display: flex; flex-direction: row; / 水平排列 / justify-content: space-between; / 元素两端对齐 / align-items: center; / 垂直居中 */ height: 100px; border: 1px solid #ddd; }
/* 项目样式 / .flex-item { flex: 1; / 等比例占据空间 */ margin: 5px; padding: 10px; background-color: #f3f3f3; text-align: center; }
/* 单独设置某个项目不放大 / .flex-item:nth-child(2) { flex-grow: 0; width: 150px; / 固定宽度 */ } Flex布局的优缺点
• 优点：
◦ 语法简洁，适配性强，轻松实现居中、等距排列等布局。
◦ 自动处理元素尺寸，响应式布局更简单。
• 缺点：
◦ 主要用于一维布局，二维布局（如网格）更适合用Grid布局。
◦ 兼容性需注意（IE11+支持，低版本需前缀）。
应用场景
• 导航栏、侧边栏与主内容区布局。
• 卡片列表、图片画廊的等距排列。
• 垂直或水平居中元素（如模态框内容）。
