Flex 布局：从基础介绍到使用
Flex布局是应用CSS美化页面的重要手段，可以在不同设备，不同页面情况下，自动化、动态调整元素布局。它是CSS3原生自带的布局模块，所有现代浏览器都原生支持，直接写CSS代码就能使用，无需任何额外操作，下面分模块讲述。
一、Flex布局核心介绍
Flex布局的全称是Flexible Box 弹性盒布局，是CSS3为了解决传统布局（浮动、定位）的痛点（比如垂直居中困难、子元素自适应分配空间繁琐、响应式适配麻烦等）设计的一维布局方案（一次只能处理行或列一个方向的布局）。
核心优势
核心概念
使用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 |
步骤2：给容器设置Flex布局+基础样式（核心）
在<style>中添加代码，关键属性display: flex;，同时加基础样式让布局更直观：
|
CSS /* 以下是Flex容器常用属性，按需添加 */ /* Flex项目基础样式 */ |
步骤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 |
效果：item2会自动填充容器中item1、item3、item4之外的所有剩余空间，适配不同容器宽度。
六、浏览器兼容性
Flex布局的兼容性非常好，所有现代浏览器（Chrome 29+、Firefox 28+、Edge 12+、Safari 9+）都原生支持，无需加浏览器前缀（如-webkit-）。
- 若需要兼容IE11，只需给部分属性加前缀（如-ms-flex），但开发中一般无需考虑IE；
- 移动端浏览器（微信小程序、App内置浏览器）完全支持，是移动端布局的首选方案。
总结
作业：呈现如下显示效果，完成的评论区 CALL 1
