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结构（容器+项目）
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex布局基础使用</title> <style> /* 这里写Flex相关CSS代码 */ </style> </head> <body> <!-- Flex容器：box --> <div class="box"> <!-- Flex项目：item1-item4 --> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> </div> </body> </html> |
步骤2：给容器设置Flex布局+基础样式（核心）
在<style>中添加代码，关键属性 display: flex;，同时加基础样式让布局更直观：
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| CSS /* Flex容器 */ .box { width: 800px; height: 400px; border: 2px solid #333; margin: 50px auto; /* 核心：开启Flex布局 */ display: flex; /* 以下是Flex容器常用属性，按需添加 */ justify-content: center; /* 主轴居中（水平居中） */ align-items: center; /* 侧轴居中（垂直居中） */ gap: 20px; /* 项目之间的间距（行+列），替代margin，更方便 */ flex-wrap: wrap; /* 项目超出容器时自动换行（默认不换行，会挤压项目） */ } /* Flex项目基础样式 */ .item { width: 150px; height: 150px; font-size: 40px; color: #fff; text-align: center; line-height: 150px; } /* 项目背景色，方便区分 */ .item1 {background: red;} .item2 {background: blue;} .item3 {background: green;} .item4 {background: orange;} |
步骤3：运行效果
将上述代码保存为flex-demo.html，双击用浏览器打开，就能看到4个项目在容器中水平+垂直居中，且彼此间距20px的效果，这就是Flex布局的便捷性------传统布局需要写多行代码，Flex只需3个属性就能实现。
四、Flex布局核心属性（常用必学）
Flex的所有布局效果，都是通过容器属性 （控制整体布局）和项目属性 （控制单个项目）实现，以下是开发中90%场景会用到的核心属性，记熟即可满足大部分布局需求。
1. 容器属性（给父元素加，最核心）
|-----------------|--------------------|-----------------------------------------------------------------------------------------------|
| 属性 | 作用 | 常用值 |
| display: flex | 开启Flex布局（核心） | flex（块级）/inline-flex（行内块级） |
| justify-content | 控制项目在主轴的对齐方式 | flex-start（左/上，默认）、flex-end（右/下）、center（居中）、space-between（两端对齐，项目间距相等）、space-around（项目两侧间距相等） |
| align-items | 控制项目在侧轴的单行对齐方式 | stretch（拉伸，默认）、flex-start（上/左）、flex-end（下/右）、center（居中，垂直居中核心） |
| flex-wrap | 项目超出容器时是否换行 | nowrap（不换行，默认）、wrap（换行）、wrap-reverse（反向换行） |
| gap | 项目之间的间距（行+列） | 数值+单位（如10px、2rem），替代margin，避免间距重叠 |
| flex-direction | 控制主轴方向 | row（水平从左到右，默认）、column（垂直从上到下）、row-reverse/column-reverse（反向） |
2. 项目属性（给子元素加，按需使用）
|------------|------------------------------|-------------------------------------------------------|
| 属性 | 作用 | 常用值 |
| flex: 1 | 核心，项目自适应分配父容器剩余空间 | 数值（如1、2，数值越大占比越高），简写=flex-grow flex-shrink flex-basis |
| align-self | 单个项目的侧轴对齐方式，覆盖容器的align-items | center、flex-start、flex-end等，与align-items值一致 |
| order | 控制项目的排列顺序 | 数值（默认0，负数在前，正数在后），无需修改HTML结构 |
五、实用示例：Flex实现自适应布局（高频场景）
比如实现导航栏左侧logo、右侧菜单，菜单自适应间距 ，或卡片布局，屏幕变小时自动换行 ，只需修改上述示例的CSS，核心用flex: 1实现自适应：
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| CSS .box { display: flex; justify-content: space-between; /* 主轴两端对齐 */ align-items: center; gap: 10px; } /* 让第2个项目自适应占满剩余空间 */ .item2 { flex: 1; /* 关键：自适应剩余空间 */ } |
效果：item2会自动填充容器中item1、item3、item4之外的所有剩余空间，适配不同容器宽度。
六、浏览器兼容性
Flex布局的兼容性非常好，所有现代浏览器（Chrome 29+、Firefox 28+、Edge 12+、Safari 9+）都原生支持 ，无需加浏览器前缀（如-webkit-）。
- 若需要兼容IE11，只需给部分属性加前缀（如-ms-flex），但开发中一般无需考虑IE；
- 移动端浏览器（微信小程序、App内置浏览器）完全支持，是移动端布局的首选方案。
总结
- Flex布局是CSS3原生布局模块 ，不是软件/插件，无需下载、安装、付费，直接写CSS代码即可使用；
- 使用核心：给父容器设置display: flex;，通过容器属性 控制整体布局，项目属性控制单个元素，轻松实现居中、自适应、响应式；
- 优势显著：解决传统布局痛点，代码极简，兼容性好，是PC端+移动端前端布局的首选方案；
- 开发工具无要求：任意代码编辑器编写，任意现代浏览器运行，无额外前置条件。
**作业：**呈现如下显示效果，完成的评论区 CALL 1
