目录一、核心知识点梳理二、基础版左右固定 中间自适应2.2 运行结果观察三、进阶实战模仿学校官网三列布局3.1 本次新增知识点3.2 完整代码3.3 运行结果观察四、学习踩坑 注意事项五、总结哈喽大家好最近一直在深耕前端基础布局从最开始搞不懂块级、行内元素到慢慢上手 Flex 弹性布局踩了不少坑也收获满满。今天就以一名学习者的视角记录我用 Flex 实现经典三列布局的完整过程、实操代码、运行效果以及总结的避坑要点分享给正在入门前端的小伙伴们一、核心知识点梳理在写代码之前先搞懂 Flex 最核心的两个概念和实现三列布局必用的属性不然写代码就是瞎抄。1.Flex 基本组成Flex 布局由两部分组成容器给元素加display: flex它就变成了 Flex 容器2.项目容器的直接子元素会自动变成 Flex 项目按照 Flex 规则排列 三列布局的本质就是把三个列放在同一个 Flex 容器里让它们水平排列。实现三列布局的关键属性这是我觉得最核心的部分搞懂这几个属性三列布局就通了左右侧边栏flex: 0 0 200px意思是不放大第一个 0、不缩小第二个 0、初始宽度 200px也就是固定宽度 200px中间内容区flex: 1意思是自动放大占据容器所有剩余空间实现自适应宽度容器默认align-items: stretch这个太香了不用写任何额外代码三列会自动拉伸到一样高完美解决了传统布局的高度不一致问题二、基础版左右固定 中间自适应先写一个最基础、最通用的三列布局包含顶部导航、中间三列和底部页脚复制就能直接运行。2.1 完整代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleFlex实现三列布局/title style * { margin: 0; padding: 0; box-sizing: border-box; } #navigator { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } #content { width: 100%; min-height: 500px; display: flex; } #div1 { background-color: red; width: 10%; } #div2 { background-color: green; width: 80%; } #div3 { background-color: blue; width: 10%; } #footer { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } /style /head body div idnavigator网页导航栏/div div idcontent div iddiv1左侧栏/div div iddiv2中间内容/div div iddiv3右侧栏/div /div div idfooter网页页脚/div /body /html2.2 运行结果观察打开浏览器运行后能直观看到顶部橙色导航栏和底部橙色页脚高度固定 50px左右红 / 蓝栏宽度固定 200px中间绿栏随窗口自适应三列高度完全一致自动占满屏幕剩余空间缩放浏览器时左右栏宽度不变中间栏自动伸缩三、进阶实战模仿学校官网三列布局学会基础版后我们来实战一个真实的项目案例 ——广东云浮中医药职业学院学院简介页。这是非常典型的官网三列布局学会这个就能应对大部分企业、学校类网站的布局需求。3.1 本次新增知识点语义化标签用header、aside、main、footer代替纯div代码更规范、SEO 更好Flex 垂直居中align-items: center轻松实现 logo 在导航栏的垂直居中文字排版细节首行缩进、行间距、字间距提升页面阅读体验3.2 完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title广东云浮中医药职业学院/title style * { margin: 0; padding: 0; box-sizing: border-box; } #header { width: 100%; height: 75px; background-color: #297d3c; display: flex; align-items: center; padding: 0 25px; } .logo-wrap img { height: 62px; } #content { width: 100%; min-height: 560px; display: flex; } .left-col { width: 10%; background-color: #f3f6f4; padding: 15px; } .center-col { width: 80%; padding: 30px; } .right-col { width: 10%; background-color: #f3f6f4; padding: 15px; } .motto-box { width: 100%; padding:20px 0; text-align: center; } .motto-box img{ height:80px; } #footer { width: 100%; height: 60px; background-color: #297d3c; color: #fff; text-align: center; line-height: 60px; } /style /head body div idheader div classlogo-wrap img srclogo.png alt校徽 /div /div div idcontent div classleft-col h4学院公告/h4 p·2025招生资讯/p p·实训基地通知/p /div div classcenter-col h3学院简介/h3 p广东云浮中医药职业学院2021年获批建校是广东省政府批准、教育部备案、云浮市政府主管的全日制公办医药类高职院校校训为厚德精业、自强不息。院校坐落于素有“南药之乡”美誉的云浮市新兴县依托本地丰富南药资源与广州中医药大学对口帮扶资源办学。/p p stylemargin-top:10px;学校总体规划用地1125亩分三期建设现已建成一期395亩校区建筑面积13万平方米一期建设工程斩获国内建筑最高奖项鲁班奖可容纳在校生4500人以上。校内配套现代化教学楼、实训楼、图书馆、标准化运动场与四人间公寓式宿舍教学、生活设施完备。/p p stylemargin-top:10px;学院下设6个二级学院开设中医学、针灸推拿、护理、中药学、药学、中医康复技术、中药制药、中草药栽培与加工等14个热门专科专业其中中药学专业群为广东省省级高水平专业群中医学、针灸推拿、护理为国控医学类专业专业紧扣粤港澳大湾区康养产业、南药种植加工产业人才需求。/p p stylemargin-top:10px;办学立足粤西、辐射大湾区聚焦中医药传承与现代健康产业深耕基层医疗、中医药生产、养生康养人才培养建校以来已向粤西医疗卫生、南药行业输送数千名实用型技能人才致力打造省内特色鲜明的中医药高职名校。/p /div div classright-col h4校园动态/h4 p·中医药文化节/p p·校企合作项目/p /div /div !-- 校训图片移到内容板块下方 -- div classmotto-box img src./logo2.png alt厚德精业 自强不息 /div div idfooter ©2025 广东云浮中医药职业学院 | 地址广东省云浮市 /div /body /html3.3 运行结果观察顶部深绿色导航栏左侧显示学校官方 logo完美垂直居中中间三列左右浅灰色侧边栏固定 200px中间白色内容区自适应左侧显示学院公告右侧显示校园动态鼠标悬停时文字会变色中间学院简介文字有首行缩进行间距合适阅读体验良好校训区域居中显示红色大字 “厚德精业 自强不息”字体醒目底部深绿色页脚显示版权信息和地址所有区域高度自动适配没有任何高度塌陷问题四、学习踩坑 注意事项这部分是我踩过最多坑的地方整理了新手最容易出错的点最基础的错误忘记给父容器加display: flex我一开始写的时候经常漏写这一行结果三个 div 还是垂直排列找了半天 bug 才发现。记住只有父容器是 Flex 容器子元素才会水平排列成三列。搞懂flex: 1的真正含义很多人以为flex:1是平分空间其实它等价于flex: 1 1 0%。如果写成flex: 1 1 auto中间内容多了会挤压侧边栏这是新手常犯的错误。防止侧边栏被挤压如果不写第二个 0flex-shrink:0当浏览器窗口特别小的时候侧边栏会被压缩变窄。所以固定宽度的侧边栏一定要写flex: 0 0 宽度。实战中的高度计算真实项目中页面会有多个区域头部、内容、校训、页脚一定要准确计算min-height的值否则会出现底部留白或者内容溢出的问题。语义化标签很重要不要所有地方都用div用aside放侧边栏、main放主内容、footer放页脚不仅代码更易读还能提升网站的 SEO 效果。五、总结Flex 实现三列布局的核心其实非常简单父容器加display: flex左右栏设固定宽度中间栏设flex: 1。相比传统的 float 布局Flex 代码更简洁、逻辑更清晰还能自动解决高度不一致的问题。从基础的彩色三列到真实的学校官网页面只要掌握了核心原理就能举一反三实现各种复杂的布局效果。建议大家看完这篇博客后自己动手修改代码换个颜色、加个边框、改改文字把学到的知识真正变成自己的。