踩遍布局所有弯路，我整理这份Flex全套实战笔记
很多前端新手长期被页面布局折磨：元素排版错乱、居中反复调试、盒子宽窄不受控制、自适应页面怎么写都出错。
本文循序渐进，从基础display盒子模型入手，逐层拆解Flex默认规则、主轴排布、交叉轴多行对齐、元素伸缩三大核心属性。
一、前置基础知识：display三种盒子形态
块级、行内、行内块是CSS布局底层根基，display属性直接决定盒子的排布特性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子display属性讲解</title> <style> #div1 { width: 200px; height: 80px; background-color: red; border: 2px black solid; /* display: none; 隐藏元素，完全不占用页面空间 */ /* display: inline; 转为行内元素，宽高设置失效 */ /* display: inline-block; 行内块，同行摆放且支持自定义宽高 */ } #div2 { width: 200px; height: 80px; background-color: blue; border: 2px black solid; } #div3 { width: 200px; height: 80px; background-color: green; border: 2px black solid; } #div4 { width: 200px; height: 80px; background-color: yellow; border: 2px black solid; } b { width: 200px; height: 80px; background-color: pink; border: 2px black solid; } </style> </head> <body> <div id="div1">盒子1</div> <div id="div2">盒子2</div> <div id="div3">盒子3</div> <div id="div4">盒子4</div> <b>行内盒子5</b> <b>行内盒子6</b> </body> </html>运行结果：
知识点总结
1. block块级元素：独占整行，能够自定义宽高，div默认属于块元素
2. inline行内元素：横向并排展示，强行设置宽高不会生效
3. inline-block：融合两种特性，横向排列同时支持宽高自定义
二、Flex初始默认布局规则
给父容器添加display:flex即可激活弹性布局，系统自带五条默认规则，不需要额外书写属性。
1. flex-direction:row 子元素默认从左向右横向排列
2. flex-wrap:nowrap 空间不足不会自动换行，子元素整体压缩宽度
3. justify-content:flex-start 所有项目靠左对齐
4. align-items:stretch 子元素高度自动拉伸填满容器
5. flex-grow默认0不自动扩容，flex-shrink默认1允许压缩
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Flex默认基础布局</title> <style> .container { display: flex; border: 2px solid #aaa; width: 600px; height: 300px; padding: 10px; } .item { background-color: #4CAF50; border: 3px solid red; width: 80px; height: 40px; color: white; text-align: center; } </style> </head> <body> <h3>Flex原生默认排布效果</h3> <div class="container"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> <div class="item">项目4</div> <div class="item">项目5</div> <div class="item">项目6</div> <div class="item">项目7</div> </div> </body> </html>运行结果：
三、justify-content主轴水平全方位对齐演示
六种常用参数：flex-start靠左、flex-end靠右、center居中、space-between两端贴边、space-around侧边留白、space-evenly间距完全均分。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>主轴对齐所有取值演示</title> <style> .container { display: flex; border: 2px solid #a00; padding: 10px; height: 100px; margin: 15px 0; } .item { background-color: #4CAF50; border: 3px solid red; width: 80px; height: 40px; color: white; text-align: center; } </style> </head> <body> <h4>1.默认靠左对齐 flex-start</h4> <div class="container" style="justify-content: flex-start;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <h4>2.靠右对齐 flex-end</h4> <div class="container" style="justify-content: flex-end;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <h4>3.水平居中 center</h4> <div class="container" style="justify-content: center;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html>运行结果：
四、align-content交叉轴多行垂直对齐
核心硬性前提：必须设置flex-wrap:wrap开启自动换行，仅单行容器该属性完全失效。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>align-content多行交叉轴对齐</title> <style> .container { display: flex; width: 500px; height: 250px; border: 2px solid #333; margin: 12px 0; flex-wrap: wrap; } .item { width: 160px; height: 40px; border: 1px solid green; color: red; text-align: center; } </style> </head> <body> <p>顶部对齐 flex-start</p > <div class="container" style="align-content: flex-start;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> <p>垂直居中 center</p > <div class="container" style="align-content: center;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> <p>底部对齐 flex-end</p > <div class="container" style="align-content: flex-end;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> </body> </html>五、Flex三大伸缩核心属性：grow、shrink、basis
1. flex-basis：设定盒子初始基准宽度，优先级高于width
2. flex-grow：容器存在空余空间时，按照比例放大盒子，默认数值0拒绝放大
3. flex-shrink：容器空间不够时，分摊压缩尺寸，默认数值1允许压缩
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素伸缩三大属性实验</title> <style> .flex-container { display: flex; height: 80px; border: 10px solid #333; margin: 25px 0; } .item { height: 100%; color: white; text-align: center; } </style> </head> <body> <p>实验一：flex-basis 自定义初始基础宽度</p > <div class="flex-container" style="width: 500px;"> <div class="item" style="flex-basis: 100px; background: #f44336;">基础100px</div> <div class="item" style="flex-basis: 200px; background: #4caf50;">基础200px</div> </div> <p>实验二：flex-grow 剩余空间1:2比例分配放大</p > <div class="flex-container" style="width: 500px;"> <div class="item" style="flex-basis:100px;flex-grow:1;background:#2196f3;">放大比例1</div> <div class="item" style="flex-basis:100px;flex-grow:2;background:#ff9800;">放大比例2</div> </div> <p>实验三：flex-shrink 空间溢出1:3比例压缩</p > <div class="flex-container" style="width: 300px;"> <div class="item" style="flex-basis:200px;flex-shrink:1;background:#9c27b0;">压缩比例1</div> <div class="item" style="flex-basis:200px;flex-shrink:3;background:#e91e63;">压缩比例3</div> </div> </body> </html>六、实战案例一：自适应企业导航栏
日常网站顶部导航栏标准写法，自动适配不同浏览器窗口大小，固定logo尺寸、中间菜单自适应填充、按钮适度压缩。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>商用自适应导航栏</title> </head> <body> <div style="display: flex; align-items: center; height: 60px; padding: 0 20px; background: #333; color: white;"> <!-- Logo固定宽度，禁止放大缩小 --> <div style="flex-basis: 120px; flex-grow: 0; flex-shrink: 0; font-weight: bold; font-size: 18px;">WEBLOGO</div> <!-- 中间菜单自动占用剩余全部空间 --> <div style="flex-basis: 0; flex-grow: 1; flex-shrink: 1; margin: 0 25px;"> <div style="display: flex; gap: 18px;"> <span>首页</span> <span>产品详情</span> <span>服务介绍</span> <span>关于我们</span> <span>联系方式</span> </div> </div> <!-- 登录按钮轻微压缩保护 --> <div style="flex-basis: 80px; flex-grow: 0; flex-shrink: 0.5; text-align: center;">登录入口</div> </div> </body> </html>七、
填充完整flex相关属性，实现相册自动换行、行列居中均分排版，完整标准答案代码如下，直接运行即可：
<html> <head> <style> .gallery { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-content: center; width: 800px; height: 500px; border: 10px solid #333; } .photo { flex-basis: 180px; height: 120px; color: white; text-align: center; line-height: 120px; font-size: 18px; } </style> </head> <body> <div class="gallery"> <div class="photo" style="background: #ff4444;">照片1</div> <div class="photo" style="background: #ffaa33;">照片2</div> <div class="photo" style="background: #00C851;">照片3</div> <div class="photo" style="background: #33b5e5;">照片4</div> <div class="photo" style="background: #2BBBAD;">照片5</div> <div class="photo" style="background: #9966cc;">照片6</div> <div class="photo" style="background: #aa66cc;">照片7</div> <div class="photo" style="background: #ffbb33;">照片8</div> <div class="photo" style="background: #00C8ff;">照片9</div> <div class="photo" style="background: #ff44aa;">照片10</div> <div class="photo" style="background: #ff44f9;">照片11</div> </div> </body> </html>文末学习总结
1. display 属性决定盒子原生文档流排列方式，是全部布局的底层根基
2. display:flex开启弹性布局，更改传统默认网页文档流规则
3. justify-content管控水平主轴对齐，align-content专门处理多行垂直排布
4. grow控制扩容、shrink控制压缩、basis定义初始尺寸，三者构成自适应核心
5. 导航栏、相册布局是企业开发与课程作业最高频两大Flex场景
今天先到这里了🙂