盒子的display属性，谁看谁秒懂
一、display四个常用属性作用
display: none;元素直接隐藏，不占页面位置
display: inline;转为行内元素，宽高失效，横向并排
display: block;转为块级元素，独占一行，支持宽高
display: inline‑block;行内块：横向并排 + 可以设置宽
运用实例
<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>二、弹性flex布局_基本容器
实例
<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>flex容器：加了 display:flex 的父盒子
flex项目：容器里面所有直接子元素
主轴：默认水平左右方向
交叉轴：垂直上下方向
justify-content ：主轴对齐
align-items ：交叉轴对齐
flex-direction:row → 水平排
flex-wrap:nowrap → 不换行
justify-content:flex-start → 靠左
align-items:stretch → 高度默认填满父盒子（子设置height就失效）
fex‑grow:0 → 不会自动撑满剩余空间
flex‑shrink:1 → 空间不够会压缩
flex‑basis:auto → 宽度默认看width
align-content单行无效。
三、弹性flex布局_主轴上的对齐方式
实例
<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>center：整体居中
space‑evenly：所有间隔一模一样
space‑between：左右贴边，中间空隙均分
space‑around：每个盒子左右空隙相同
六个值直白区别
flex‑start：全部靠左
flex‑end：全部靠右
center：整体居中
space‑between：左右贴边，中间平分空白
space‑around：每个盒子左右空隙一样
space‑evenly：容器所有缝隙完全相等
四、多行项目在容器交叉轴方向的对齐方式
实例
<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>justify‑content：主轴水平对齐，管左右
align‑items：单行垂直对齐，管一行上下
align‑content：多行垂直对齐，必须换行才生效
flex‑wrap:wrap：弹性布局换行开关。
五、弹性flex布局_项目的大小和缩放控制
实例
<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>容器属性（父盒子）
display: flex开启弹性布局，子元素横向排列。
flex‑direction主轴方向：row水平、column垂直。
flex‑wrap: wrap子元素超出宽度自动换行。
justify‑content主轴对齐（水平）
flex‑start：靠左
flex‑end：靠右
center：居中
space‑between：左右贴边，中间均分
space‑around：每个盒子两侧空隙相等
space‑evenly：所有间隔完全一致
align‑items单行垂直对齐 控制一行内盒子上下位置。
align‑content多行垂直对齐 必须换行才生效，控制多行整体分布。
flex‑basis盒子原始基准宽度，优先级高于width。
flex‑grow剩余空间放大比例，默认0不放大。
flex‑shrink空间不足缩小比例，默认1会收缩，0禁止缩小。
六、项目缩放的应用场景_响应式导航栏
实例
<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>1,、父容器设置
display:flex 开启弹性布局， align‑items:center 让内容垂直居中。
2、三个模块规则
1.LOGO： flex‑basis:120px，grow:0，shrink:0
固定宽度，不放大、不压缩，窗口缩放大小不变。
2.中间菜单： flex‑basis:0，grow:1，shrink:1
自动占满剩余空白；页面变窄，最先压缩。
3.登录按钮： flex‑basis:80px，grow:0，shrink:0.5
宽度基本固定，压缩幅度最小。
3、flex简写格式
flex：放大比例 缩小比例 基础宽度
例： flex:0 0 120px
4、规律
grow值越大，空余空间分得越多。
shrink数值越小，越不容易被挤窄。