Flex 布局：从基础介绍到使用
Flex 布局是应用 CSS 美化页面的重要手段，可以在不同设备、不同页面情况下，自动化、动态调整元素布局。它是 CSS3 原生自带的布局模块，所有现代浏览器都原生支持，直接写 CSS 代码就能使用，无需任何额外操作，下面分模块讲述。
一、Flex 布局核心介绍
Flex 布局的全称是Flexible Box 弹性盒布局，是 CSS3 为了解决传统布局（浮动、定位）的痛点（比如垂直居中困难、子元素自适应分配空间繁琐、响应式适配麻烦等）设计的一维布局方案（一次只能处理行或列一个方向的布局）。
核心优势
- 轻松实现元素水平/垂直居中（传统布局的经典痛点）；
- 子元素可自适应分配父容器的剩余空间，无需手动计算宽度/高度；
- 灵活调整子元素的排列顺序、间距、对齐方式，代码极简；
- 天然支持响应式，适配不同屏幕尺寸，无需大量媒体查询；
- 子元素的浮动（float）、清除浮动（clear）会失效，避免布局塌陷问题。
核心概念
使用 Flex 布局的容器称为Flex 容器（flex container），容器内的直接子元素称为Flex 项目（flex item），核心是通过给容器设置 CSS 属性，控制项目的布局表现，核心概念分两个方向：
- 主轴：项目默认的排列方向（默认水平从左到右），由 flex-direction 属性控制；
- 侧轴/交叉轴：与主轴垂直的方向（默认垂直从上到下），用于项目的垂直对齐。
二、Flex 布局的「使用方法」
使用 Flex 布局的核心步骤只有1 步：给父容器设置 display: flex;（块级 Flex 容器）或 display: inline-flex;（行内块级 Flex 容器，适合容器需要随内容自适应宽度的场景），之后就可以通过 Flex 专属属性控制布局。
前置条件
无需安装任何软件，只需满足：
- 开发工具：任意代码编辑器（VS Code、Sublime、HBuilder、记事本均可）；
- 运行环境：任意现代浏览器（Chrome、Firefox、Edge、Safari，IE11 及以下部分支持，开发中可忽略 IE）。
核心使用步骤（附完整示例）
以最常用的块级 Flex 容器为例，分「容器属性」和「项目属性」讲解，直接复制代码到.html 文件，用浏览器打开就能看到效果。
步骤 1：编写基础 HTML 结构（容器 + 项目）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Flex 布局基础使用
1
2
3
4
