Flex弹性盒指的是规则可变的父盒此时对诸多子盒的布局变成为父盒制定排序规则。一Flex 布局核心概念与机制Flexbox 是 CSS3 引入的一种一维布局模型旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。1、其核心概念包括1 容器与项目采用 Flex 布局的元素称为 Flex 容器其内部的子元素称为 Flex 项目。2主轴与交叉轴Flex 容器有两根轴主轴由flex-direction定义交叉轴垂直于主轴。3对齐方式justify-content 控制主轴对齐align-items 和 align-content 控制交叉轴对齐。4空间分配通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。2、核心两大角色Flex弹性盒指的是规则可变的父盒此时对诸多子盒的布局变成为父盒制定排序规则。1父容器flex 容器给盒子加 displayflex: 它就变成弹性盒子父级。***一个父盒被他包含的子盒必须遵从的排列规则如下1. 块元素从上到下2. 行内元素从左到右2子元素flex 项目容器里面所有直接子标签自动变成弹性项。3、方式通过 display:flex 将此元素强制转换为 Flex 容器二Flex 容器默认规则不写属性时的默认值1. flex-direction: row→ 主轴方向水平从左到右→ 项目会水平排列成一排2. flex-wrap: nowrap→ 不换行默认→ 项目会被压缩以适应容器宽度除非设置 flex-shrink: 0→ 如果想换行需要设置: flex-wrap: wrap;3. justify-content: flex-start→ 主轴对齐方式项目靠主轴起点左对齐→ 其他值: flex-end(右) | center(居中) | space-between | space-around4. align-items: stretch→ 交叉轴对齐方式项目会拉伸填满整个交叉轴方向→ 前提项目没有设置 height或者 height 为 auto→ 其他值: flex-start | flex-end | center | baseline5. align-content: normal (在单行时无效)→ 多行项目在交叉轴方向的对齐方式** 项目item的默认规则6. flex-grow: 0→ 默认不自动放大当容器有剩余空间时→ 如果想自动放大: flex-grow: 1;7. flex-shrink: 1→ 默认会自动收缩当项目总宽度超过容器时→ 注意只有 width/flex-basis 参与收缩margin/padding/border 不会收缩→ 如果不想收缩: flex-shrink: 0;8. flex-basis: auto→ 项目的基础尺寸默认取 width 值→ 也可以设置为具体像素: flex-basis: 100px;三Flex布局示例1 - 基本容器按照默认规则排列接下来给大家讲解一下Flex布局的基本容器步骤一依旧是先建立外层盒子 .container 弹性容器.container { display: flex; }步骤二最关键一行普通 div 是上下堆叠加display: flex后内部子盒子自动横着排成一行。下面是可自行配置的灵活规则flex-direction: row;flex-wrap: nowrap;justify-content: flex-start; border: 2px solid #aaa; /* 给容器画边框方便看出范围 */ width: 600px; /* 容器宽度600像素 */ height: 300px; /* 容器高度300像素 */ padding: 10px; /* 内部留白10px */步骤三写一个内部小盒子 .item 弹性项目.item { background-color: #4CAF50; /* 绿色背景 */ border: 3px solid red; /* 红色边框 */ width: 80px; /* 每个小盒子默认宽80px */ height: 40px; /* 每个小盒子高40px */ color: white; /* 白色文字 */ text-align: center; /* 文字水平居中 */ }步骤四body 里的结构一个大容器包裹一堆小盒子大容器开了 flex所有小盒子横向排列body h3Flex容器示例项目按照容器默认规则排列/h3 div classcontainer !-- 块元素从上到下文档流排列 -- div classitem项目1/div div classitem项目2/div div classitem项目3/div div classitem项目1/div div classitem项目2/div div classitem项目3/div div classitem项目1/div div classitem项目1/div div classitem项目2/div div classitem项目3/div div classitem项目1/div /div /body结果如下图所示︶↗相当于一个大房间里面有很多个小房间这样理解可能就清晰一点啦。四Flex布局示例2 - justify-content主轴对齐方式justify-content 属性详解作用控制所有项目在主轴水平方向上的对齐方式和间距分布前提只有在主轴方向有剩余空间时才会生效可选值1. flex-start → 项目靠主轴起点左边对齐默认值[盒子1][盒子2][盒子3] [大盒子右边]2. flex-end → 项目靠主轴终点右边对齐[大盒子左边] [盒子1][盒子2][盒子3]3. center → 项目在主轴方向居中对齐[盒子1][盒子2][盒子3]4. space-evenly → 项目之间以及项目与容器边缘的间距完全相等[盒子1] [盒子2] [盒子3]5. space-between → 项目之间间距相等但首尾项目紧贴容器边缘[盒子1] [盒子2] [盒子3]6. space-around → 项目两侧的外边距相等项目之间间距是边缘间距的2倍[盒子1] [盒子2] [盒子3]一句话速记justify-content 控制一行盒子 左右怎么摆、空隙怎么分靠左flex-start靠右flex-end居中center空隙完全相等space-evenly两边贴死中间等分space-between每个盒子左右相等space-around接下来给大家演示一下吧步骤一依旧是先建立外层盒子 .container 弹性容器 大盒子.container { display: flex; /* 关键让里面的小盒子横着排 */ border:2px solid red; /* 红色边框让你看见范围 */ height:100px; }步骤二建立小盒子 项目设立项目样式 简单设置项目的尺寸和外观.item { width:80px; height:40px; background:绿色; }就是 3 个绿色小方块。步骤三body内容:控制主轴对齐方式。 justify-content属性的六种取值控制项目在主轴上的对齐方式和间距分布。body h1justify-content控制主轴对齐方式/h1 h3justify-content: flex-start 项目在容器中以主轴起点对齐默认值/h3 div classcontainer stylejustify-content: flex-start; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div h3justify-content: flex-end 项目在容器中以主轴终点对齐/h3 div classcontainer stylejustify-content: flex-end; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div h3justify-content: center 项目在容器中以主轴居中对齐/h3 div classcontainer stylejustify-content: center; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div h3justify-content: space-evenly 项目在容器中均匀分布/h3 div classcontainer stylejustify-content: space-evenly; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div h3justify-content: space-between 项目在容器中均匀分布但首尾项目紧贴容器边缘/h3 div classcontainer stylejustify-content: space-between; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div h3justify-content: space-around 项目在容器中均匀分布但每个项目两侧外边距相等/h3 div classcontainer stylejustify-content: space-around; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div -- /body效果如下图所示可以理解为一个大房间里面小房间的布局。五Flex布局示例3- 项目的大小和缩放控制主轴对齐方式讲的是 Flex 里最实用、最常用的 3 个属性flex-basis→ 小盒子本来应该多大基础尺寸flex-grow→ 有空地方时小盒子要不要变大、变大多少flex-shrink→ 地方不够时小盒子要不要变小、变小多少步骤一大盒子容器用来装小盒子.flex-container { display: flex; /* 让小盒子横着排 */ height: 80px; /* 大盒子高度 */ border: 10px solid #333; /* 黑色粗边框让你看见范围 */ }步骤二小盒子项目.item { height: 100%; color: white; }步骤三body部分三个实验实验 1flex-basis→小盒子的基础大小flex-basis定义项目在主轴方向上的初始大小- 相当于给项目设置了一个理想尺寸- 优先级高于 width如果同时设置的话- 默认值auto会使用项目的 width 值本实验两个项目分别设置为 100px 和 200px- 容器宽度500px- 项目总宽度100 200 300px 500px- 没有剩余空间也没有超出所以保持原大小思考小盒子本来应该多大flex-basis: 100px;实验 2flex-grow→有空地就变大flex-grow放大比例定义项目在有剩余空间时的放大比例- 默认值0不放大- 只有当容器有剩余空间时才会生效- 剩余空间按各项目 flex-grow 值的比例分配本实验- 容器宽度500px- 项目初始宽度100 100 200px- 剩余空间500 - 200 300px- flex-grow 比例1 : 2项目1得1份项目2得2份- 总份数1 2 3份- 每份大小300 ÷ 3 100px计算结果- 项目1实际宽度100 (1 × 100) 200px- 项目2实际宽度100 (2 × 100) 300px- 验证200 300 500px正好填满容器思考大盒子里有空地方小盒子要不要抢空间变大flex-grow: 1; flex-grow: 2;0 不抢默认1 抢 1 份2 抢 2 份打个比方就是flex-grow就是分剩下的空地。实验 3flex-shrink→地方不够就缩小flex-shrink缩小比例定义项目在空间不足时的缩小比例- 默认值1会自动缩小- 设置为 0 表示禁止缩小- 空间不足时按各项目 flex-shrink 值的比例分配压缩量- 注意margin、padding、border 不参与压缩本实验- 容器宽度300px- 项目初始宽度200 200 400px- 超出空间400 - 300 100px- flex-shrink 比例1 : 3项目1得1份项目2得3份- 总份数1 3 4份- 每份压缩量100 ÷ 4 25px计算结果- 项目1实际宽度200 - (1 × 25) 175px- 项目2实际宽度200 - (3 × 25) 125px- 验证175 125 300px正好等于容器宽度--思考大盒子太小了小盒子要不要挤一挤变小flex-shrink: 1; flex-shrink: 3;0 绝不缩小1 缩 1 份3 缩 3 份*****三个属性的默认值和记忆技巧Flex 三大属性对照表属性默认值作用记忆技巧flex-basisauto初始尺寸理想大小basis 基础flex-grow0有剩余空间时放大grow 生长→变大flex-shrink1空间不足时收缩变小shrink 收缩→变小flex 简写规则flex: 1flex: 1 1 0%flex: autoflex: 1 1 autoflex: 0 0 100px 固定尺寸不放大不缩小总代码如下图所示!DOCTYPE html html head meta charsetUTF-8 titleFlex布局示例5 - 项目的大小和缩放控制/title style .flex-container { display: flex; height: 80px; border: 10px solid #333; margin: 20px 0; } */ .item { height: 100%; color: white; text-align: center; } /style /head body -- p【实验1】 flex-basis 初始大小100px 和 200px无放大缩小/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【实验2】flex-grow 放大初始各100px总剩余300px按1:2分配/p div classflex-container stylewidth: 500px; div classitem styleflex-basis: 100px; flex-grow: 1; background: #2196f3;grow:1/div div classitem styleflex-basis: 100px; flex-grow: 2; background: #ff9800;grow:2/div /div -- p【实验3】 flex-shrink 缩小初始各200px总超出100px按1:3承担/p div classflex-container stylewidth: 300px; div classitem styleflex-basis: 200px; flex-shrink: 1; background: #9c27b0;shrink:1/div div classitem styleflex-basis: 200px; flex-shrink: 3; background: #e91e63;shrink:3/div /div /body /html结果如下图所示︶↗相当于大房间中如何规划小房间的大小占比。六布局示例4 - 多行项目在容器交叉轴方向的对齐方式含换行控制1、 align-content 属性详解作用控制多行项目在交叉轴垂直方向上的对齐方式重要前提1. 必须先使用 flex-wrap: wrap 换行产生多行2. 只有一行时align-content 无效3. 只有在交叉轴方向有剩余空间时才会生效可选值1. flex-start → 所有行靠交叉轴起点顶部对齐2. flex-end → 所有行靠交叉轴终点底部对齐3. center → 所有行在交叉轴方向居中对齐4. space-between → 行之间间距相等首行靠顶末行靠底5. space-around → 行上下间距相等整体与容器边缘也有间距6. stretch → 默认值行拉伸填满剩余空间行内项目也会被拉伸2、flex-wrap 属性说明可选值1. nowrap (默认) → 不换行项目会被压缩以适应容器2. wrap → 换行项目超出容器时自动换到下一行3. wrap-reverse → 换行但反向显示第一行在底部演示一下吧步骤一依旧是先建立外层盒子 .container 弹性容器定义flex容器的基础样式.container { /* 将容器设置为flex布局 */ display: flex; /* 容器宽度固定控制换行效果 */ width: 500px; /* 容器高度固定为交叉轴留出空间 */ height: 250px; /* 容器边框方便观察整体范围 */ border: 2px solid #333; /* 容器之间的外边距避免拥挤 */ margin: 10px; /* 强制换行当项目总宽度超过容器时自动换行产生多行 */ flex-wrap: wrap;****项目样式注意本示例中项目没有 margin所以 flex-shrink 可以正常压缩如果项目有 marginmargin 不会参与压缩可能导致溢出步骤二建立小盒子 项目.item { /* 项目宽度 */ width: 160px; /* 项目高度 */ height: 40px; /* 项目边框 */ border: green solid 1px; /* 文字颜色 */ color: red; /* 文字水平居中 */ text-align: center; /* 项目外边距注释掉为了让 flex-shrink 正常压缩*/ /* margin: 5px; */ }步骤三标题样式p { margin: 20px 0 5px 10px; }步骤四body部分五个容器多行项目在容器交叉轴方向上的对齐方式本页面展示了 align-content 的效果(注意由于 flex-wrap 被注释掉项目没有真正换行所以本示例中 align-content 实际上不生效只有一行。如果想看真正的多行对齐效果需要取消注释 flex-wrap: wrap;)重要区别- align-items: 作用于单行内的所有项目垂直方向的对齐- align-content: 作用于多行整体多行作为一个整体在容器中的对齐换行相关属性- flex-wrap: nowrap (默认) → 不换行- flex-wrap: wrap → 换行开始演示!第一个容器flex-start 顶部对齐注意 第一个容器没有设置 align-content所以使用默认值 stretch由于没有换行flex-wrap 被注释所以 align-content 实际不生效palign-content: 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 classitem7/div div classitem8/div /div结果第二个容器center 垂直居中效果所有行作为一个整体在容器垂直方向居中palign-content: 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 classitem7/div div classitem8/div /div结果容器设置居中对齐多行整体悬浮在容器垂直中间位置第三个容器flex-end 底部对齐效果所有行靠容器底部对齐palign-content: 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 classitem7/div div classitem8/div /div多行整体紧贴容器底部摆放结果第四个容器space-between 两端贴边均分间距效果第一行靠顶最后一行靠底行之间间距相等palign-content: space-between行与行之间间距相等第一行靠顶最后一行靠底/p div classcontainer stylealign-content: space-between; div classitem1/div div classitem2/div div classitem3/div div classitem4/div div classitem5/div div classitem6/div div classitem7/div div classitem8/div /div首行顶格、末行底格行与行之间空隙均匀相等结果第五个容器space-around 四周均分间距效果每行上下间距相等整体与容器边缘也有间距palign-content: space-around行上下都有相等间距整体与容器边缘也有间距/p div classcontainer stylealign-content: space-around; div classitem1/div div classitem2/div div classitem3/div div classitem4/div div classitem5/div div classitem6/div div classitem7/div div classitem8/div /div每一行上下都预留相同空隙整体和容器上下边缘也存在间距结果七flex-basis、flex-grow、flex-shrink的典型应用1、响应式导航栏 - 典型应用场景flex-basis、flex-grow、flex-shrink 是实现灵活布局的核心工具 尤其适合需要「自适应容器空间」的场景。【典型场景】响应式导航栏导航栏通常包含「Logo、菜单选项、操作按钮」需要在不同屏幕尺寸下自动调整布局- 大屏幕时元素均匀分布充分利用空间- 中等屏幕时菜单选项自动收缩避免换行- 小屏幕时优先保证关键元素如 Logo 和按钮显示次要菜单适当压缩2、导航栏布局设计思路1. Logo左侧- flex-basis: 120px → 初始宽度120px- flex-grow: 0 → 不放大保持固定宽度- flex-shrink: 0 → 不缩小保证Logo始终可见2. 菜单中间- flex-basis: 0 → 初始宽度为0不占用固定宽度- flex-grow: 1 → 占据所有剩余空间自动填充- flex-shrink: 1 → 空间不足时允许收缩3. 按钮右侧- flex-basis: 80px → 初始宽度80px- flex-grow: 0 → 不放大- flex-shrink: 0.5 → 允许轻微收缩但收缩比例较小3、测试方法运行后在浏览器按F12打开开发者工具 然后调整浏览器窗口宽度观察导航栏的变化接下来写一个完整导航栏代码步骤一Logo区域- flex: 0 0 120px 的简写形式- 固定120px宽度既不放大也不缩小- 确保品牌标识始终清晰可见div styledisplay: flex; align-items: center; height: 60px; padding: 0 20px; background: #333; color: white; div styleflex-basis: 120px; flex-grow: 0; flex-shrink: 0; font-weight: bold;LOGO/div步骤二中间菜单区域- flex: 1 1 0 的简写形式- flex-basis: 0 表示初始不占宽度完全依靠 flex-grow 填充剩余空间- 当屏幕变小时这个区域会优先收缩div styleflex-basis: 0; flex-grow: 1; flex-shrink: 1; margin: 0 20px; div styledisplay: flex; gap: 15px; span首页/span span产品/span span关于我们/span span联系/span /div /div步骤三右侧按钮区域- flex: 0 0.5 80px 的简写形式- flex-shrink: 0.5 表示允许收缩但只承担一半的收缩比例- 这样在极端情况下按钮会被压缩但不会完全消失div styleflex-basis: 80px; flex-grow: 0; flex-shrink: 0.5; text-align: center;登录/div总结使用 flex: 0 0 120px 可以一次性设置三个属性元素flex-growflex-shrinkflex-basis效果Logo00120px固定宽度不变化菜单110自动填充剩余空间按钮00.580px固定宽度允许轻微收缩总代码如下!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleflex-basis、flex-grow、flex-shrink的典型应用/title /head body div styledisplay: flex; align-items: center; height: 60px; padding: 0 20px; background: #333; color: white; div styleflex-basis: 120px; flex-grow: 0; flex-shrink: 0; font-weight: bold;LOGO/div div styleflex-basis: 0; flex-grow: 1; flex-shrink: 1; margin: 0 20px; div styledisplay: flex; gap: 15px; 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结果今天讲解的内容有点多希望大家能一起攻克哦期待我们下期再见ヾ(≧▽≦*)o
