踩遍布局所有弯路，我整理这份Flex全套实战笔记

很多前端新手长期被页面布局折磨元素排版错乱、居中反复调试、盒子宽窄不受控制、自适应页面怎么写都出错。本文循序渐进从基础display盒子模型入手逐层拆解Flex默认规则、主轴排布、交叉轴多行对齐、元素伸缩三大核心属性。一、前置基础知识display三种盒子形态块级、行内、行内块是CSS布局底层根基display属性直接决定盒子的排布特性。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 iddiv1盒子1/div div iddiv2盒子2/div div iddiv3盒子3/div div iddiv4盒子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 langzh-CN head meta charsetUTF-8 titleFlex默认基础布局/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 h3Flex原生默认排布效果/h3 div classcontainer div classitem项目1/div div classitem项目2/div div classitem项目3/div div classitem项目4/div div classitem项目5/div div classitem项目6/div div classitem项目7/div /div /body /html运行结果三、justify-content主轴水平全方位对齐演示六种常用参数flex-start靠左、flex-end靠右、center居中、space-between两端贴边、space-around侧边留白、space-evenly间距完全均分。!DOCTYPE html html langzh-CN head meta charsetUTF-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 h41.默认靠左对齐 flex-start/h4 div classcontainer stylejustify-content: flex-start; div classitem1/div div classitem2/div div classitem3/div /div h42.靠右对齐 flex-end/h4 div classcontainer stylejustify-content: flex-end; div classitem1/div div classitem2/div div classitem3/div /div h43.水平居中 center/h4 div classcontainer stylejustify-content: center; div classitem1/div div classitem2/div div classitem3/div /div /body /html运行结果四、align-content交叉轴多行垂直对齐核心硬性前提必须设置flex-wrap:wrap开启自动换行仅单行容器该属性完全失效。!DOCTYPE html html head meta charsetUTF-8 titlealign-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 classcontainer stylealign-content: flex-start; div classitem1/div div classitem2/div div classitem3/div div classitem4/div div classitem5/div div classitem6/div /div p垂直居中 center/p div classcontainer stylealign-content: center; div classitem1/div div classitem2/div div classitem3/div div classitem4/div div classitem5/div div classitem6/div /div p底部对齐 flex-end/p div classcontainer stylealign-content: flex-end; div classitem1/div div classitem2/div div classitem3/div div classitem4/div div classitem5/div div classitem6/div /div /body /html五、Flex三大伸缩核心属性grow、shrink、basis1. flex-basis设定盒子初始基准宽度优先级高于width2. flex-grow容器存在空余空间时按照比例放大盒子默认数值0拒绝放大3. flex-shrink容器空间不够时分摊压缩尺寸默认数值1允许压缩!DOCTYPE html html head meta charsetUTF-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 classflex-container stylewidth: 500px; div classitem styleflex-basis: 100px; background: #f44336;基础100px/div div classitem styleflex-basis: 200px; background: #4caf50;基础200px/div /div p实验二flex-grow 剩余空间1:2比例分配放大/p div classflex-container stylewidth: 500px; div classitem styleflex-basis:100px;flex-grow:1;background:#2196f3;放大比例1/div div classitem styleflex-basis:100px;flex-grow:2;background:#ff9800;放大比例2/div /div p实验三flex-shrink 空间溢出1:3比例压缩/p div classflex-container stylewidth: 300px; div classitem styleflex-basis:200px;flex-shrink:1;background:#9c27b0;压缩比例1/div div classitem styleflex-basis:200px;flex-shrink:3;background:#e91e63;压缩比例3/div /div /body /html六、实战案例一自适应企业导航栏日常网站顶部导航栏标准写法自动适配不同浏览器窗口大小固定logo尺寸、中间菜单自适应填充、按钮适度压缩。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title商用自适应导航栏/title /head body div styledisplay: flex; align-items: center; height: 60px; padding: 0 20px; background: #333; color: white; !-- Logo固定宽度禁止放大缩小 -- div styleflex-basis: 120px; flex-grow: 0; flex-shrink: 0; font-weight: bold; font-size: 18px;WEBLOGO/div !-- 中间菜单自动占用剩余全部空间 -- div styleflex-basis: 0; flex-grow: 1; flex-shrink: 1; margin: 0 25px; div styledisplay: flex; gap: 18px; span首页/span span产品详情/span span服务介绍/span span关于我们/span span联系方式/span /div /div !-- 登录按钮轻微压缩保护 -- div styleflex-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 classgallery div classphoto stylebackground: #ff4444;照片1/div div classphoto stylebackground: #ffaa33;照片2/div div classphoto stylebackground: #00C851;照片3/div div classphoto stylebackground: #33b5e5;照片4/div div classphoto stylebackground: #2BBBAD;照片5/div div classphoto stylebackground: #9966cc;照片6/div div classphoto stylebackground: #aa66cc;照片7/div div classphoto stylebackground: #ffbb33;照片8/div div classphoto stylebackground: #00C8ff;照片9/div div classphoto stylebackground: #ff44aa;照片10/div div classphoto stylebackground: #ff44f9;照片11/div /div /body /html文末学习总结1. display 属性决定盒子原生文档流排列方式是全部布局的底层根基2. display:flex开启弹性布局更改传统默认网页文档流规则3. justify-content管控水平主轴对齐align-content专门处理多行垂直排布4. grow控制扩容、shrink控制压缩、basis定义初始尺寸三者构成自适应核心5. 导航栏、相册布局是企业开发与课程作业最高频两大Flex场景今天先到这里了