# 布局与响应式设计-第11章-11.1-Flex核心概念 ## 一、学习目标 - 理解Flexbox布局模型的核心设计思想 - 掌握容器、项目、主轴、交叉轴的定义及关系 - 区分Flexbox与传统布局方案的本质差异 ## 二、概念讲解 Flexbox（弹性盒子布局）是CSS3引入的**一维布局模型**，通过定义容器与项目之间的关系实现灵活的空间分配和对齐控制。与传统布局（如浮动、定位）相比，Flexbox具有以下核心优势： - **无需手动计算尺寸**：自动分配剩余空间 - **天然支持垂直居中**：简化对齐实现 - **自适应容器变化**：动态调整项目大小和位置 ### 核心术语体系 | 术语 | 定义 | 图示关系 | |--------------|----------------------------------------------------------------------|-----------------------------------| | **Flex容器** | 设置`display: flex`的父元素，所有直接子元素自动成为Flex项目 | 容器是项目的直接父级 | | **Flex项目** | 容器内的直接子元素，默认沿主轴排列 | 项目受容器属性控制 | | **主轴** | 项目排列的主要方向，默认水平从左到右（`flex-direction: row`） | 决定项目的排列方向 | | **交叉轴** | 与主轴垂直的方向，默认垂直从上到下 | 主轴为水平时交叉轴垂直，反之亦然 | ### 传统布局痛点对比 | 传统布局方案 | Flexbox解决方案 | |--------------------|-----------------------------------------| | 垂直居中需复杂 hacks | `align-items: center` 一行代码实现 | | 子元素等宽需计算百分比 | `flex: 1` 自动等分剩余空间 | | 浮动布局需清除浮动 | 无需浮动，容器默认包含项目 | ## 三、语法基础 ### 启用Flexbox 通过为父元素设置`display: flex`或`display: inline-flex`启用Flex布局： ```css /* 块级Flex容器 */ .flex-container { display: flex; /* 容器将占据整行宽度 */ } /* 行内Flex容器 */ .inline-flex-container { display: inline-flex; /* 容器宽度由内容决定 */ } ``` ### 主轴与交叉轴方向控制 通过`flex-direction`属性设置主轴方向，间接决定交叉轴方向： ```css .container { display: flex; flex-direction: row; /* 默认值：主轴水平从左到右，交叉轴垂直从上到下 */ /* flex-direction: column; 主轴垂直从上到下，交叉轴水平从左到右 */ /* flex-direction: row-reverse; 主轴水平从右到左 */ /* flex-direction: column-reverse; 主轴垂直从下到上 */ } ``` ## 四、实战示例 ### 基础示例：创建Flex容器与项目 ```html ``` **效果说明**：3个项目将沿水平方向（主轴）排列，容器自动包含所有项目，无需清除浮动。 ### 进阶示例：主轴方向切换 ```css .flex-container { display: flex; flex-direction: column; /* 主轴改为垂直方向 */ height: 400px; /* 垂直布局需设置容器高度 */ } ``` **效果变化**：项目将沿垂直方向排列，宽度默认拉伸填满容器（后续章节详解）。 ## 五、注意事项 1. **浏览器兼容性**： - 支持所有现代浏览器（Chrome 29+、Firefox 28+、Edge 12+） - IE11部分支持，需添加`-ms-`前缀（如`display: -ms-flexbox`） 2. **项目默认行为**： - 项目默认不换行（`flex-wrap: nowrap`） - 项目默认沿主轴方向拉伸以填充空间（`flex: 0 1 auto`） 3. **与Grid布局的区别**： - Flexbox是一维布局（单行或单列） - Grid是二维布局（多行多列），适合整体页面布局 - 两者可组合使用（如Grid容器内嵌套Flex项目） ## 六、自测题 1. Flexbox布局中，哪个属性用于设置主轴方向？ - A. `justify-content` - B. `flex-direction` - C. `align-items` *答案：B* 2. 如何将Flex项目沿垂直方向排列？ - A. `flex-direction: column` - B. `flex-direction: row` - C. `align-items: column` *答案：A* 3. Flex容器设置`display: flex`后，子元素的默认排列方式是？ - A. 垂直排列，从上到下 - B. 水平排列，从左到右 - C. 水平排列，从右到左 *答案：B*