文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载导读本文是「千古前端图文教程」中 CSS3 进阶部分的核心章节之一系统讲解 Flex 弹性布局从入门到实战的全部关键知识点包括display: flex的声明方式、主轴与侧轴的概念、flex-direction、justify-content、align-items、flex伸缩权重等核心属性并给出多组可直接复制运行的完整代码演示。读完本文你将掌握用 Flex 布局替代传统浮动布局、快速实现水平垂直居中、按比例分配剩余空间等实战能力。CSS3 中的flex属性在布局方面做了非常大的改进使得我们对多个元素之间的布局排列变得十分灵活适应性非常强。其强大的伸缩性和自适应性在网页开发中可以发挥极大的作用。一、flex 初体验一个属性改变排列方向我们先来看看下面这个最简单的布局默认文档流中在一个父容器里放置多个块级的子元素这些子元素会默认从上往下排列。在此基础之上如果给父容器仅仅加一个display: flex属性此时这些子元素的布局会摇身一变子元素们会在水平方向上从左至右排列就是这么神奇。可以说你此刻已经掌握了关于 flex 的一半的知识。二、flex 布局的优势flex 布局的子元素不会脱离文档流很好地遵从了流的特性。作为对比如果用float来做布局float属性的元素会脱离文档流而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题比较麻烦所以也成了面试必问的经典题目。但有了 flex 布局之后这些问题都不存在了。flex 是一种现代的布局方式是 W3C 第一次提供真正用于布局的 CSS 规范。flex 提供了非常丰富的属性非常灵活让布局的实现更加多样化且方便易用。flex 唯一的缺点在于它不支持低版本的 IE 浏览器。三、flex 的兼容性问题flex 布局不支持 IE9 及以下的版本IE10 及以上也只是部分支持。如果你的页面不需要处理 IE 浏览器的兼容性问题则可以放心大胆地使用 flex 布局。但像网易新闻、淘宝这样的大型网站面对的是海量用户即便使用低版本浏览器的用户比例很少绝对基数仍然很庞大。因此这些网站为了兼容低版本的 IE 浏览器暂时还不敢尝试使用 flex 布局。而本仓库中的示例代码主要面向现代浏览器环境如 Chrome 等可直接运行查看效果若需兼容老旧浏览器可参考 前端的几道题目 中补充的-webkit-flex前缀写法parentElement { display: flex; /* Flex 布局 */ display: -webkit-flex; /* Safari 等旧版 WebKit 内核浏览器 */ align-items: center; /* 设置子元素在侧轴方向上的布局 */ }四、两个核心概念弹性盒子与主轴/侧轴1. 概念弹性盒子、子元素在讲 flex 的知识点之前我们先约定两个概念弹性盒子指的是使用display: flex或display: inline-flex声明的父容器。子元素 / 弹性元素指的是父容器里面的子元素们在父容器被声明为 flex 盒子的情况下。2. 概念主轴和侧轴在初体验的例子中我们发现弹性盒子里面的子元素们默认是从左至右排列的这个方向代表的就是主轴的方向。由此引入主轴和侧轴两个概念主轴flex 容器的主轴默认是水平方向从左向右。侧轴与主轴垂直的轴称作侧轴默认是垂直方向从上往下。备注主轴和侧轴并不是固定不变的可以通过flex-direction更换方向后面会详细讲到。五、弹性盒子声明与排列方向flex-direction1. 声明定义使用display: flex或display: inline-flex声明一个父容器为弹性盒子。此时这个父容器里的子元素们会遵循弹性布局。备注一般使用display: flex这个属性display: inline-flex用得较少。2. flex-direction 属性设置子元素的排列方向flex-direction用于设置盒子中子元素的排列方向属性值如下表属性值描述row从左到右水平排列子元素默认值column从上到下垂直排列子元素row-reverse从右向左排列子元素column-reverse从下到上垂直排列子元素备注如果我们不给父容器写flex-direction这个属性子元素默认就是从左到右排列的。代码演示将下列 HTML 在浏览器中打开即可看到传统布局与四种排列方向的对比效果!DOCTYPE html html head langen meta charsetUTF-8 title/title style *{ margin: 0; padding: 0; list-style: none; } body{ background-color: #eee; font-family: Microsoft Yahei; font-size:22px; } h3{ font-weight: normal; } section{ width: 1000px; margin:40px auto; } ul{ background-color: #fff; border: 1px solid #ccc; } ul li{ width: 200px; height: 200px; background-color: pink; margin:10px; } section:nth-child(1) ul{ overflow: hidden; /* 清除浮动 */ } section:nth-child(1) ul li{ float: left; } /* 设置伸缩盒子*/ section:nth-child(2) ul{ display: flex; } section:nth-child(3) ul{ /* 设置伸缩布局*/ display: flex; /* 设置主轴方向*/ flex-direction: row; } section:nth-child(4) ul{ /* 设置伸缩布局*/ display: flex; /* 设置主轴方向 :水平翻转*/ flex-direction: row-reverse; } section:nth-child(5) ul{ /* 设置伸缩布局*/ display: flex; /* 设置主轴方向 :垂直*/ flex-direction: column; } section:nth-child(6) ul{ /* 设置伸缩布局*/ display: flex; /* 设置主轴方向 :垂直*/ flex-direction: column-reverse; } /style /head body section h3传统布局/h3 ul li1/li li2/li li3/li /ul /section section h3伸缩布局 display:flex/h3 ul li1/li li2/li li3/li /ul /section section h3主轴方向 flex-direction:row/h3 ul li1/li li2/li li3/li /ul /section section h3主轴方向 flex-direction:row-reverse/h3 ul li1/li li2/li li3/li /ul /section section h3主轴方向 flex-direction:column/h3 ul li1/li li2/li li3/li /ul /section section h3主轴方向 flex-direction:column-reverse/h3 ul li1/li li2/li li3/li /ul /section /body /html代码解读第 1 个section使用float: left做传统布局第 2 个section只加display: flex子元素立刻变为水平排列第 36 个section分别演示row、row-reverse、column、column-reverse四种主轴方向。注意column/column-reverse切换的不仅是子元素的排列方向主轴与侧轴也随之互换此时从左到右变成了侧轴方向。3. flex-wrap 属性控制子元素溢出时的换行处理flex-wrap用于控制子元素溢出时的换行行为常用的取值有nowrap默认不换行、wrap换行新行沿侧轴方向排列、wrap-reverse换行新行沿侧轴反方向排列。当容器宽度不足以容纳所有子元素时wrap可以避免子元素被压缩变形。例如 CSS开发积累 中在涉及多子元素换行排布的场景里就采用了flex-wrap: wrap的写法display: flex; flex-wrap: wrap;六、弹性元素主轴与侧轴的对齐方式1. justify-content 属性子元素在主轴上的对齐方式justify-content用于设置子元素在主轴上的对齐方式。属性值可以是flex-start从主轴的起点对齐默认值flex-end从主轴的终点对齐center居中对齐space-around在父盒子里平分space-between两端对齐平分代码演示在浏览器中打开看效果!DOCTYPE html html head langen meta charsetUTF-8 title/title style *{ margin: 0; padding: 0; list-style:none;} body{ background-color: #eee; font-family: Microsoft Yahei; } section{ width: 1000px; margin:50px auto; } section h3{ font-size:22px; font-weight: normal; } ul{ border: 1px solid #999; background-color: #fff; display: flex; } ul li{ width: 200px; height: 200px; background: pink; margin:10px; } section:nth-child(1) ul{ /* 主轴对齐方式从主轴开始的方向对齐*/ justify-content: flex-start; } section:nth-child(2) ul{ /* 主轴对齐方式从主轴结束的方向对齐*/ justify-content: flex-end; } section:nth-child(3) ul{ /* 主轴对齐方式居中对齐*/ justify-content: center; } section:nth-child(4) ul{ /* 主轴对齐方式在父盒子中平分*/ justify-content: space-around; } section:nth-child(5) ul{ /* 主轴对齐方式两端对齐 平分*/ justify-content: space-between; } /style /head body section h3主轴的对齐方式justify-content:flex-start/h3 ul li1/li li2/li li3/li /ul /section section h3主轴的对齐方式justify-content:flex-end/h3 ul li1/li li2/li li3/li /ul /section section h3主轴的对齐方式justify-content:center/h3 ul li1/li li2/li li3/li /ul /section section h3主轴的对齐方式justify-content:space-round/h3 ul li1/li li2/li li3/li /ul /section section h3主轴的对齐方式justify-content:space-bettwen/h3 ul li1/li li2/li li3/li li4/li /ul /section /body /html效果要点flex-start与flex-end分别让子元素整体贴向主轴起点/终点center让整组子元素在主轴方向居中space-around在每个子元素两侧均分空间space-between让第一个和最后一个子元素贴边、中间元素均分剩余空间。2. align-items 属性子元素在侧轴上的对齐方式align-items用于设置子元素在侧轴上的对齐方式。属性值可以是flex-start从侧轴开始的方向对齐flex-end从侧轴结束的方向对齐baseline基线对齐默认同flex-startcenter中间对齐stretch拉伸代码演示!DOCTYPE html html head langen meta charsetUTF-8 title/title style *{ margin: 0; padding: 0; list-style:none; } body{ background-color: #eee; font-family: Microsoft Yahei; } section{ width: 1000px; margin:50px auto; } section h3{ font-size:22px; font-weight: normal; } ul{ border: 1px solid #999; background-color: #fff; display: flex; height:500px; } ul li{ width: 200px; height: 200px; background: pink; margin:10px; } section:nth-child(1) ul{ /* 侧轴对齐方式 从侧轴开始的方向对齐*/ align-items:flex-start; } section:nth-child(2) ul{ /* 侧轴对齐方式 从侧轴结束的方向对齐*/ align-items:flex-end; } section:nth-child(3) ul{ /* 侧轴对齐方式 居中*/ align-items:center; } section:nth-child(4) ul{ /* 侧轴对齐方式 基线 默认同flex-start*/ align-items:baseline; } section:nth-child(5) ul{ /* 侧轴对齐方式 拉伸*/ align-items:stretch; } section:nth-child(5) ul li{ height:auto; } /style /head body section h3侧轴的对齐方式:align-items flex-start/h3 ul li1/li li2/li li3/li /ul /section section h3侧轴的对齐方式align-items:flex-end/h3 ul li1/li li2/li li3/li /ul /section section h3侧轴的对齐方式align-items:center/h3 ul li1/li li2/li li3/li /ul /section section h3侧轴的对齐方式align-itmes:baseline/h3 ul li1/li li2/li li3/li /ul /section section h3侧轴的对齐方式align-itmes: stretch/h3 ul li1/li li2/li li3/li /ul /section /body /html效果要点本组演示给父容器ul设置了height: 500px让侧轴方向有足够的剩余空间来展示对齐差异。flex-start/flex-end/center分别让子元素贴向侧轴起点、终点或居中baseline以子元素文字基线对齐stretch是默认行为注意第 5 个section中把li的height改为auto子元素才会被拉伸填满容器高度。3. flex 属性设置子盒子的权重flex属性用于设置子盒子的伸缩权重比例。给子元素设置不同的flex数值子元素会按照权重比例分配主轴上的剩余空间。代码演示!DOCTYPE html html head langen meta charsetUTF-8 title/title style *{ margin: 0; padding: 0; list-style:none; } body{ background-color: #eee; font-family: Microsoft Yahei; } section{ width: 1000px; margin:50px auto; } section h3{ font-size:22px; font-weight: normal; } ul{ border: 1px solid #999; background-color: #fff; display: flex; } ul li{ width: 200px; height: 200px; background: pink; margin:10px; } section:nth-child(1) ul li:nth-child(1){ flex:1; } section:nth-child(1) ul li:nth-child(2){ flex:1; } section:nth-child(1) ul li:nth-child(3){ flex:8; } section:nth-child(2) ul li:nth-child(1){ } section:nth-child(2) ul li:nth-child(2){ flex:1; } section:nth-child(2) ul li:nth-child(3){ flex:4; } /style /head body section h3伸缩比例:flex/h3 ul li1/li li2/li li3/li /ul /section section h3伸缩比例:flex/h3 ul li1/li li2/li li3/li /ul /section /body /html效果要点第 1 个section中三个子元素分别设置flex: 1、flex: 1、flex: 8即按 1 : 1 : 8 的比例分配剩余空间第三个子元素会明显宽于前两个第 2 个section中第三个元素不设flex保持基准宽度另外两个按 1 : 4 分配剩余空间。由此可以看出flex数值代表的是剩余空间的分配权重而不是绝对的宽度值。进阶说明flex是flex-grow伸展比例、flex-shrink收缩比例、flex-basis基准尺寸的复合简写。本仓库教程中统一使用flex: 数值的简写形式分配权重足以覆盖绝大多数按比例分配的实战场景在需要精确控制基准尺寸与收缩行为时可以进一步拆分为三个子属性。七、实战技巧结合 margin 实现水平垂直居中与弹窗布局本仓库相关文档中总结了多个基于本文所讲属性的实战技巧此处一并归纳。1. flex 布局常用的三行居中代码在 CSS开发积累 中记录了 flex 布局最常用的三行代码可用于让子元素在容器中水平垂直居中display: flex; justify-content: center; /* 子元素在横轴的对齐方式左右居中 */ align-items: center; /* 子元素在竖轴的对齐方式上下居中 */其中justify-content: center对应本文第六节的主轴对齐align-items: center对应侧轴对齐当主轴为默认的row方向时二者恰好实现左右居中与上下居中。2. flex 布局 margin: auto让指定子元素居中在 04-如何让一个元素水平垂直居中 中进一步指出给父容器设置display: flex后再给指定的某个子元素设置margin: auto即可让这个子元素在剩余空间里水平垂直居中——而不是像justify-content: centeralign-items: center那样让所有子元素都居中。这是本仓库推荐的居中写法核心代码如下.parent { display: flex; } .son { margin: auto; /* 在 flex 上下文中margin:auto 同时作用于主轴与侧轴 */ }值得强调的是在 flex 布局中子元素的margin: auto不仅能让其在水平方向上居中垂直方向上也是居中的这正是它比传统margin: 0 auto更强的地方。3. 弹窗/红包幕帘的规范居中写法同样在 04-如何让一个元素水平垂直居中 中给出了移动端红包幕帘/弹窗场景的严格居中规范写法弹窗的正文内容区设置自适应宽高且严格居中。该场景正是flex 主轴对齐 侧轴对齐 margin 自动分配的综合应用建议大家在写弹窗时严格采用水平居中、垂直居中的写法避免在不同机型上出现偏移。4. 三栏布局面试题中的 flex 方案在 前端的几道题目 中经典的两边固定宽度、中间自适应三栏布局问题可以考察圣杯布局、双飞翼布局也可以直接使用flex 布局CSS3解决父容器display: flex左右两栏固定宽度中间一栏设置flex: 1自适应占满剩余空间。该文件同时也记录了让元素垂直居中的三种方式其中方式三即 flex 布局方案可作为本节的面试配套练习。八、学习路径与仓库配套阅读本文所在的 02-CSS基础 目录是「千古前端图文教程」CSS 基础系列的一部分建议按以下顺序配合阅读形成完整的 CSS3 知识闭环02-CSS属性背景属性了解盒子外观样式的设置是理解 flex 布局视觉效果的基础。06-CSS盒模型详解理解宽高、margin、padding的取值规则是正确计算 flex 剩余空间的前提。04-如何让一个元素水平垂直居中本文第七节的延伸阅读完整对比七种居中方案与 flex 方案的优劣。CSS开发积累收录 flex 常用三行代码、多行文本省略号等高频开发技巧。前端的几道题目以面试题形式检验 flex 布局、垂直居中、三栏布局的掌握程度。此外本文配套的完整可运行示例均以 HTML 文件形式内嵌在各小节中无需任何构建工具复制保存后直接用浏览器打开即可观察效果适合初学者动手验证、反复调参。九、总结至此本文已经完整覆盖了 CSS3 Flex 布局的核心知识知识点核心属性一句话总结声明弹性盒子display: flex/inline-flex父容器变为弹性盒子子元素遵循弹性布局主轴方向flex-direction决定子元素的排列方向row / column / reverse换行处理flex-wrap控制子元素溢出时的换行行为主轴对齐justify-content控制子元素在主轴上的分布方式侧轴对齐align-items控制子元素在侧轴上的对齐方式伸缩权重flex按数值比例分配主轴剩余空间自动分配margin: auto让指定子元素在 flex 容器中水平垂直居中掌握这些属性之后你会发现曾经需要用浮动、定位配合各种 hack 才能实现的布局如今只需要几行 flex 声明即可优雅地完成。无论是日常开发中的居中对齐、等分布局、自适应三栏还是移动端弹窗的严格居中flex 都是你手中最趁手的布局利器。更进一步的学习可以继续阅读本仓库 03-CSS进阶 目录下的布局进阶章节将 flex 与其他现代布局手段融会贯通。赞分享文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载相关推荐CSS 布局全攻略display、position、float 与 Flex 布局实战千古前端图文教程CSS 布局全攻略display、position、float 与 Flex 布局实战千古前端图文教程 本文是「千古前端图文教程」中 03 CSS进阶/0文档教程前端assistant-ui 接入 AG-UI 协议使用 assistant-ui/react-ag-ui 驱动标准 React 聊天组件assistant ui 接入 AG UI 协议使用 assistant ui/react ag ui 驱动标准 React 聊天组件 本指南围绕 assi文档教程前端千古前端CSS完全指南掌握Flex布局和Grid布局的终极教程千古前端CSS完全指南掌握Flex布局和Grid布局的终极教程 千古前端图文教程 是一套超详细的前端入门到进阶知识库帮助你从零开始学前端成为一名精致优雅的文档教程前端上一篇使用 AWS CLI 查询 CloudWatch Metric Stream 配置get-metric-stream 命令实战下一篇pypdf 的 PDF 版本支持全解析从 1.0 到 2.0 的特性兼容与版本头处理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
