!新鲜出炉的弹性flex的多种布局！包含基本容器，主轴上对齐，多行项目在容器交叉轴方向上的对齐方式，项目的大小和缩放控制，响应式导航栏~多种布局供大家学习参考~
·
一：（1）盒子的展示
代码中display不同效果：
display: none; 隐藏元素；给 #div1 打开 display: none；和 visibility: hidden 区别：后者看不见但仍占位；display: inline; 转为行内元素；给任意 div 打开 display: inline；不再独占一行，多个盒子横向并排；定义宽高失效，盒子大小仅由内部文字决定；上下内外边距表现受限；display: block; 转为块级元素；给 <b> 标签打开 display: block；行内元素变成块级，独占一行；原本无效的 width / height 正常生效，粉色盒子变成 200*80 方块；display: inline-block; 行内块（最常用）；所有盒子统一加上 display: inline-block;
结合两者优点：
1. 像行内元素：多个盒子横向并排，不独占整行；
2. 像块级元素：支持自定义宽高、内外边距；
• 四个 div + 两个 b 全部横向排列，且都保留设置的 200*80 尺寸；
<!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; */
/* 强行设置为行内块元素，通过配置成inline-block，
宽高可以自行设置 */
/* display: inline-block; */
}
#div2 {
width: 200px;
height: 80px;
background-color: blue;
border: 2px black solid;
/* 行内元素，宽高不能设置，只能有默认的宽高 */
/* display: inline; */
/* 强行设置为行内块元素，通过配置成inline-block，
宽高可以自行设置 */
/* display: inline-block; */
}
#div3 {
width: 200px;
height: 80px;
background-color: green;
border: 2px black solid;
/* 强行设置为行内块元素，通过配置成inline-block，
宽高可以自行设置 */
/* display: inline-block; */
}
#div4 {
width: 200px;
height: 80px;
background-color: yellow;
border: 2px black solid;
/* 强行设置为行内块元素，通过配置成inline-block，
宽高可以自行设置 */
/* display: inline-block; */
}
b {
width: 200px;
height: 80px;
background-color: pink;
border: 2px black solid;
/* 强行配置为块元素，宽高可以设置 */
/* display: block; */
/* 强行设置为行内块元素，通过配置成inline-block，
宽高可以自行设置 */
/* display: inline-block; */
}
</style>
</head>
<body>
<div class="container">
<!-- 普通块元素 -->
<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>
</div>
</body>
</html>
（2)盒子代码效果图：
二：（1）弹性flex布局-基本容器
父容器 .container 设置了 display: flex → 成为 Flex 容器，所有子元素 .item 自动变成 Flex 项目。容器宽 600px、高 300px；每个项目固定 width:80px; height:40px。
1.容器属性（控制整体排列）
flex-direction：主轴方向（横/竖）； flex-wrap：是否换行；justify-content：主轴对齐； align-items：单行交叉轴对齐；align-content：多行交叉轴对齐
2. 项目属性（控制单个盒子）
flex-grow：放大比例； flex-shrink：缩小比例； flex-basis：初始尺寸
3. 默认值总结
容器：row + nowrap + flex-start + stretch；项目：grow:0 shrink:1 basis:auto
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 【Flex 布局核心概念与机制】
Flexbox 是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。
其核心概念包括：
容器与项目：采用 Flex 布局的元素称为 Flex 容器，其内部的子元素称为 Flex 项目。
主轴与交叉轴：Flex 容器有两根轴，主轴由flex-direction定义，交叉轴垂直于主轴。
对齐方式：justify-content 控制主轴对齐，align-items 和 align-content 控制交叉轴对齐。
空间分配：通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。
-->
<meta charset="UTF-8">
<title>Flex布局示例1 - 基本容器（按照默认规则排列）</title>
<style>
.container {
/* ===== 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-around
4. align-items: stretch
→ 交叉轴对齐方式：项目会拉伸填满整个交叉轴方向
→ 前提：项目没有设置 height（或者 height 为 auto）
→ 其他值: flex-start | flex-end | center | baseline
5. 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;
*/
/* 通过 display:flex 将此元素强制转换为 Flex 容器 */
display: flex;
/* 下面是可自行配置的灵活规则 */
/* flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start; */
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">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目1</div>
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目1</div>
</div>
</body>
</html>
（2）基本容器效果图
三：（1）弹性flex布局-主轴上的对齐方式
1. flex-start（默认值）项目全部靠左侧（主轴起点）依次排列，右侧留空白。2. flex-end项目全部靠右侧（主轴终点）排列，左侧留空白。3. center整组项目在水平方向居中，左右两侧空白均等。4. space-between• 首尾两个项目紧贴容器左右边缘• 中间项目之间的间距完全均等最常用：导航、列表两端对齐布局5. space-around• 每个项目左右两侧都有相同间距• 项目之间的距离 = 单侧间距 × 2；6. space-evenly所有空隙（项目与容器边缘、项目之间）大小完全一致，分布最均匀。 flex-start / flex-end / center：单纯整体对齐，无自动均分间距；space-between：两端贴边，中间均分； space-around：项目两侧留白相等，间隙一大一小； space-evenly：所有间隙完全相等
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flex布局示例3 - justify-content（主轴对齐方式）</title>
<style>
/*
====== justify-content 属性详解 ======
作用：控制所有项目在主轴（水平方向）上的对齐方式和间距分布
前提：只有在主轴方向有剩余空间时才会生效
可选值：
1. flex-start → 项目靠主轴起点（左边）对齐（默认值）
2. flex-end → 项目靠主轴终点（右边）对齐
3. center → 项目在主轴方向居中对齐
4. space-evenly → 项目之间以及项目与容器边缘的间距完全相等
5. space-between → 项目之间间距相等，但首尾项目紧贴容器边缘
6. space-around → 项目两侧的外边距相等（项目之间间距是边缘间距的2倍）
*/
.container {
display: flex;
border: 2px solid #a00;
padding: 10px;
height: 100px;
}
/*
====== 项目样式 ======
简单设置项目的尺寸和外观
*/
.item {
background-color: #4CAF50;
border: 3px solid red;
width: 80px;
height: 40px;
color: white;
/* margin: 5px;
padding: 20px; */
text-align: center;
}
</style>
</head>
<body>
<h1>justify-content（控制主轴对齐方式）</h1>
<!-- justify-content属性的六种取值，控制项目在主轴上的对齐方式和间距分布。 -->
<h3>justify-content: flex-start 项目在容器中，以主轴起点对齐（默认值）</h3>
<div class="container" style="justify-content: flex-start;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
<h3>justify-content: flex-end 项目在容器中，以主轴终点对齐</h3>
<div class="container" style="justify-content: flex-end;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
<!--
<h3>justify-content: center 项目在容器中，以主轴居中对齐</h3>
<div class="container" style="justify-content: center;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
<h3>justify-content: space-evenly 项目在容器中均匀分布</h3>
<div class="container" style="justify-content: space-evenly;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
<h3>justify-content: space-between 项目在容器中均匀分布，但首尾项目紧贴容器边缘</h3>
<div class="container" style="justify-content: space-between;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
<h3>justify-content: space-around 项目在容器中均匀分布，但每个项目两侧外边距相等</h3>
<div class="container" style="justify-content: space-around;">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div> -->
</body>
</html>
（2）效果展示：
四：（1）弹性flex-多行项目在容器交叉轴方向上的对齐方式
flex-wrap: wrap 必须开启；只有项目换行、形成多行，align-content 才生效；单行状态下完全无效；容器交叉轴（垂直）要有剩余空间（当前容器 height:250px 远大于项目高度，满足条件）。； 作用对象：多行整体 在交叉轴（垂直）的对齐与间距；flex-wrap 换行属性（容器属性）； nowrap（默认）：不换行，项目宽度被挤压，始终单行； wrap：自动换行，超出容器宽度就另起一行；wrap-reverse：反向换行，第一行显示在容器底部；容器固定宽500px、高250px，项目width:160px，一行最多放 3个，8个项目会分成多行； flex-start：所有行整体靠容器顶部排列，底部留白。center：多行整体在垂直方向居中，上下留白均等。 flex-end：所有行整体靠容器底部排列，顶部留白。 space-between：首行贴顶部、末行贴底部，行与行之间间距均等，上下边缘无留白。 space-around：每一行上下两侧留白相等，行间距 = 单侧留白 × 2，容器上下边缘也有间距。 stretch（默认值）：多行拉伸填满整个交叉轴高度，均分剩余空间。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex布局示例6 - 多行项目在容器交叉轴方向的对齐方式（含换行控制）</title>
<style>
/*
====== 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 → 默认值，行拉伸填满剩余空间（行内项目也会被拉伸）
*/
/*
====== flex-wrap 属性说明 ======
可选值：
1. nowrap (默认) → 不换行，项目会被压缩以适应容器
2. wrap → 换行，项目超出容器时自动换到下一行
3. wrap-reverse → 换行，但反向显示（第一行在底部）
*/
/* 定义flex容器的基础样式 */
.container {
/* 将容器设置为flex布局 */
display: flex;
/* 容器宽度固定，控制换行效果 */
width: 500px;
/* 容器高度固定，为交叉轴留出空间 */
height: 250px;
/* 容器边框，方便观察整体范围 */
border: 2px solid #333;
/* 容器之间的外边距，避免拥挤 */
margin: 10px;
/* 强制换行：当项目总宽度超过容器时自动换行，产生多行 */
flex-wrap: wrap;
}
/*
====== 项目样式 ======
注意：本示例中项目没有 margin，所以 flex-shrink 可以正常压缩
如果项目有 margin，margin 不会参与压缩，可能导致溢出
*/
.item {
/* 项目宽度 */
width: 160px;
/* 项目高度 */
height: 40px;
/* 项目边框 */
border: green solid 1px;
/* 文字颜色 */
color: red;
/* 文字水平居中 */
text-align: center;
/* 项目外边距（注释掉，为了让 flex-shrink 正常压缩）*/
/* margin: 5px; */
}
/* 标题样式 */
p {
margin: 20px 0 5px 10px;
}
</style>
</head>
<body>
<!--
====== align-content vs align-items 区别 ======
本页面展示了 align-content 的效果：
注意：由于 flex-wrap 被注释掉，项目没有真正换行！
所以本示例中 align-content 实际上不生效（只有一行）。
如果想看真正的多行对齐效果，需要取消注释 flex-wrap: wrap;
重要区别：
- align-items: 作用于"单行"内的所有项目（垂直方向的对齐）
- align-content: 作用于"多行"整体（多行作为一个整体在容器中的对齐）
换行相关属性：
- flex-wrap: nowrap (默认) → 不换行
- flex-wrap: wrap → 换行
-->
<h1>多行项目在容器交叉轴方向上的对齐方式</h1>
<!--
第一个容器没有设置 align-content，所以使用默认值 stretch
由于没有换行（flex-wrap 被注释），所以 align-content 实际不生效
-->
<p>align-content: 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 class="item">7</div>
<div class="item">8</div>
</div>
<!-- 2. align-content: center -->
<!-- 效果：所有行作为一个整体，在容器垂直方向居中 -->
<p>align-content: 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 class="item">7</div>
<div class="item">8</div>
</div>
<!-- 3. align-content: flex-end -->
<!-- 效果：所有行靠容器底部对齐 -->
<p>align-content: 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 class="item">7</div>
<div class="item">8</div>
</div>
<!-- 4. align-content: space-between -->
<!-- 效果：第一行靠顶，最后一行靠底，行之间间距相等 -->
<p>align-content: space-between（行与行之间间距相等，第一行靠顶，最后一行靠底）</p>
<div class="container" style="align-content: space-between;">
<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 class="item">8</div>
</div>
<!-- 5. align-content: space-around -->
<!-- 效果：每行上下间距相等，整体与容器边缘也有间距 -->
<p>align-content: space-around（行上下都有相等间距，整体与容器边缘也有间距）</p>
<div class="container" style="align-content: space-around;">
<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 class="item">8</div>
</div>
</body>
</html>
（2）多行项目在容器交叉轴方向上的对齐方式效果图：
五：（1）弹性flex布局-项目的大小和缩放控制
1. flex-basis 基础尺寸：作用：设置项目主轴初始宽度，优先级高于 width； 默认值：auto，沿用元素自身 width
• 实验1
容器宽 500px，两项目 flex-basis 分别为 100px、200px
总宽度 300px，容器剩余 200px；因未开启放大，项目保持原始尺寸。
2. flex-grow 放大比例：作用：容器有剩余空间时，按比例瓜分空间、放大项目，默认值：0，不放大
• 实验2
容器宽 500px，两个项目初始均 100px
初始总宽 200px，剩余空间 300px
放大比例 1:2，总份数 3，每份 100px
◦ 项目1：100 + 1×100 = 200px
◦ 项目2：100 + 2×100 = 300px
3. flex-shrink 缩小比例
• 作用：项目总宽度超出容器时，按比例压缩尺寸
• 默认值：1，自动缩小；设为 0 禁止缩小
• 注意：margin/padding/border 不参与压缩
• 实验3
容器宽 300px，两个项目初始均 200px
初始总宽 400px，超出容器 100px
缩小比例 1:3，总份数 4，每份压缩 25px
◦ 项目1：200 - 1×25 = 175px
◦ 项目2：200 - 3×25 = 125px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex布局示例5 - 项目的大小和缩放控制</title>
<style>
/*
====== 基础容器样式 ======
- display: flex：开启Flex布局
- height: 80px：固定高度，方便观察项目在垂直方向的对齐
- border: 10px solid #333：边框用于看清容器的实际范围
*/
.flex-container {
display: flex;
height: 80px;
border: 10px solid #333;
margin: 20px 0;
}
/*
====== 项目基础样式 ======
- height: 100%：让项目高度占满整个容器高度
- color: white：白色文字
- text-align: center：文字水平居中
*/
.item {
height: 100%;
color: white;
text-align: center;
}
</style>
</head>
<body>
<!--
====== 实验1：flex-basis（基础尺寸）======
flex-basis：定义项目在主轴方向上的初始大小
- 相当于给项目设置了一个"理想尺寸"
- 优先级高于 width（如果同时设置的话）
- 默认值：auto（会使用项目的 width 值）
本实验：两个项目分别设置为 100px 和 200px
- 容器宽度：500px
- 项目总宽度：100 + 200 = 300px < 500px
- 没有剩余空间，也没有超出，所以保持原大小
-->
<p>【实验1】 flex-basis 初始大小（100px 和 200px，无放大缩小）</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>
<!--
====== 实验2：flex-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（正好填满容器）
-->
<p>【实验2】flex-grow 放大（初始各100px，总剩余300px，按1:2分配）</p>
<div class="flex-container" style="width: 500px;">
<div class="item" style="flex-basis: 100px; flex-grow: 1; background: #2196f3;">grow:1</div>
<div class="item" style="flex-basis: 100px; flex-grow: 2; background: #ff9800;">grow:2</div>
</div>
<!--
====== 实验3：flex-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（正好等于容器宽度）
-->
<p>【实验3】 flex-shrink 缩小（初始各200px，总超出100px，按1:3承担）</p>
<div class="flex-container" style="width: 300px;">
<div class="item" style="flex-basis: 200px; flex-shrink: 1; background: #9c27b0;">shrink:1</div>
<div class="item" style="flex-basis: 200px; flex-shrink: 3; background: #e91e63;">shrink:3</div>
</div>
<!--
====== 三个属性的默认值和记忆技巧 ======
| 属性 | 默认值 | 作用 | 记忆技巧 |
|------------|--------|----------------------|--------------------|
| flex-basis | auto | 初始尺寸（理想大小） | basis = 基础 |
| flex-grow | 0 | 有空间时放大 | grow = 生长→变大 |
| flex-shrink| 1 | 空间不足时缩小 | shrink = 收缩→变小 |
简写形式：
- flex: 1; 等于 flex: 1 1 0%;
- flex: 1 1 auto; 等于 flex: auto;
- flex: 0 0 100px; 固定100px，不放大也不缩小
-->
</body>
</html>
（2）弹性flex布局-项目的大小和缩放控制效果图
六：（1）项目缩放应用场景-响应式导航栏
外层容器开启 display: flex + align-items: center，实现水平排列 + 垂直居中，整体分为三部分：
1. 左侧 LOGO：固定尺寸，不放大、不缩小
2. 中间菜单：自适应占满剩余空间，优先收缩
3. 右侧登录按钮：基础尺寸固定，轻微收缩
• flex-basis: 120px：主轴初始宽度 120px• flex-grow: 0：有剩余空间不放大• flex-shrink: 0：空间不足不压缩• 简写等价：flex: 0 0 120px• 作用：保证 Logo 尺寸永远不变，品牌标识不被挤压。
• flex-basis: 80px：初始宽度 80px• flex-grow: 0：不放大• flex-shrink: 0.5：允许收缩，但收缩权重更小• 效果：窗口变窄时，压缩幅度远小于中间菜单，按钮不会变形严重。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-basis、flex-grow、flex-shrink的典型应用</title>
</head>
<body>
<!--
====== 响应式导航栏 - 典型应用场景 ======
flex-basis、flex-grow、flex-shrink 是实现灵活布局的核心工具，
尤其适合需要「自适应容器空间」的场景。
【典型场景】：响应式导航栏
导航栏通常包含「Logo、菜单选项、操作按钮」，需要在不同屏幕尺寸下自动调整布局：
- 大屏幕时：元素均匀分布，充分利用空间
- 中等屏幕时：菜单选项自动收缩，避免换行
- 小屏幕时：优先保证关键元素（如 Logo 和按钮）显示，次要菜单适当压缩
====== 导航栏布局设计思路 ======
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 → 允许轻微收缩，但收缩比例较小
-->
<!--
测试方法：运行后在浏览器按F12，打开开发者工具，
然后调整浏览器窗口宽度，观察导航栏的变化
-->
<!--
====== 完整导航栏代码 ======
-->
<div style="display: flex; align-items: center; height: 60px; padding: 0 20px; background: #333; color: white;">
<!--
Logo区域
- flex: 0 0 120px 的简写形式
- 固定120px宽度，既不放大也不缩小
- 确保品牌标识始终清晰可见
-->
<div style="flex-basis: 120px; flex-grow: 0; flex-shrink: 0; font-weight: bold;">LOGO</div>
<!--
中间菜单区域
- flex: 1 1 0 的简写形式
- flex-basis: 0 表示初始不占宽度，完全依靠 flex-grow 填充剩余空间
- 当屏幕变小时，这个区域会优先收缩
-->
<div style="flex-basis: 0; flex-grow: 1; flex-shrink: 1; margin: 0 20px;">
<div style="display: flex; gap: 15px;">
<span>首页</span>
<span>产品</span>
<span>关于我们</span>
<span>联系</span>
</div>
</div>
<!--
右侧按钮区域
- flex: 0 0.5 80px 的简写形式
- flex-shrink: 0.5 表示允许收缩，但只承担一半的收缩比例
- 这样在极端情况下，按钮会被压缩但不会完全消失
-->
<div style="flex-basis: 80px; flex-grow: 0; flex-shrink: 0.5; text-align: center;">登录</div>
</div>
<!--
====== 完整代码解析 ======
总结：
使用 flex: 0 0 120px 可以一次性设置三个属性
| 元素 | flex-grow | flex-shrink | flex-basis | 效果 |
|--------|-----------|-------------|------------|-----------------------------------|
| Logo | 0 | 0 | 120px | 固定宽度，不变化 |
| 菜单 | 1 | 1 | 0 | 自动填充剩余空间 |
| 按钮 | 0 | 0.5 | 80px | 固定宽度，允许轻微收缩 |
-->
</body>
</html>
（2）项目缩放应用场景-响应式导航栏效果图
七：（1）flex布局练习代码
想练手的宝子可以试一下下面这个简易代码哦~可以做出想要的效果~
<html>
<head>
<style>
.gallery {
/* 1. 启用Flex布局（必选） */
/* display: ; */
/* 2. 控制项目换行（必须设置，否则align-content无效） */
/* flex-wrap: ; */
/* 3. 主轴（水平）对齐 */
/* justify-content: ; */
/* 4. 交叉轴（垂直）对齐 */
/* align-content: ; */
width: 800px; /* 容器固定宽度 */
height: 500px; /* 容器固定高度 */
border: 10px solid #333; /* 容器边框 */
}
.photo {
/* 5. 项目初始宽度*/
/* flex-basis: ; */
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>
（2)效果图
八：（1）网页导航条设计
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flex布局-课堂练习</title>
<style>
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="logo">网站Logo</div>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<div class="search-box">
<input type="text" placeholder="搜索...">
<button><i class="fa fa-search"></i></button>
</div>
</nav>
<!-- 内容区域 -->
<div class="container">
<h1>欢迎来到我们的网站</h1>
<p>这里是一些关于我们的内容。</p>
</div>
</body>
</html>
（2）效果图
总结：同学们，我们这次一次性学习了弹性flex的多种布局：基本容器，主轴上对齐，多行项目在容器交叉轴方向上的对齐方式，项目的大小和缩放控制效果图等。希望同学们根据自己的需要，创作出喜欢的网页~
更多推荐
9
0- 0
已为社区贡献1条内容
所有评论(0)