零基础入门前端弹性布局（Flexbox）实战：结合 Class 与 ID 选择器(可用于备赛蓝桥杯Web开发应用)

一、Flex 布局基础容器与项目Flex 布局由Flex 容器父元素和Flex 项目子元素组成。通过给父元素设置display: flex即可开启弹性布局。1.1 核心概念Flex 容器设置了display: flex的父元素控制子元素的排列方式。Flex 项目容器内的直接子元素自动成为弹性项目可通过属性调整自身大小和位置。二、Flex 容器属性Class 选择器复用容器属性用于控制所有子元素的整体排列规则适合用Class 选择器实现样式复用。2.1 常用容器属性表属性名可选值作用说明flex-directionrow默认、column、row-reverse定义项目的排列方向水平 / 垂直justify-contentflex-start、center、space-between定义项目在主轴上的对齐方式align-itemsflex-start、center、stretch定义项目在交叉轴上的对齐方式flex-wrapnowrap默认、wrap定义项目是否换行2.2 代码示例Class 选择器实现容器样式!-- HTML用 Class 标识 Flex 容器 -- div classflex-container div classitem项目1/div div classitem项目2/div div classitem项目3/div /div/* CSSClass 选择器复用容器样式 */ .flex-container { display: flex; /* 开启 Flex 布局 */ flex-direction: row; /* 水平排列 */ justify-content: space-between; /* 两端对齐中间留空 */ align-items: center; /* 垂直居中 */ background-color: #f0f0f0; padding: 20px; } .item { background-color: #4CAF50; color: white; padding: 10px 20px; }三、Flex 项目属性ID 选择器唯一控制项目属性用于调整单个子元素的大小或位置适合用ID 选择器实现唯一标识和精准控制。3.1 常用项目属性表属性名可选值作用说明flex-grow数字默认 0定义项目的放大比例值越大越占空间flex-shrink数字默认 1定义项目的缩小比例0 表示不缩小flex-basis长度值如200px或auto定义项目的初始大小align-selfflex-start、center、flex-end单独控制当前项目在交叉轴的对齐方式3.2 代码示例ID 选择器控制单个项目!-- HTML用 ID 标识需要单独控制的项目 -- div classflex-container div classitem iditem1项目1放大/div div classitem iditem2项目2垂直靠下/div div classitem iditem3项目3固定宽度/div /div/* CSSID 选择器精准控制单个项目 */ #item1 { flex-grow: 2; /* 占据剩余空间的 2 份 */ } #item2 { align-self: flex-end; /* 单独垂直靠下对齐 */ } #item3 { flex-basis: 150px; /* 初始宽度固定为 150px */ flex-shrink: 0; /* 禁止缩小 */ }四、实战案例Flex 布局实现响应式导航栏结合Class复用导航样式和ID标识 Logo 或特殊按钮实现一个自适应的导航栏。4.1 完整代码!DOCTYPE html html head style /* Class 选择器导航容器通用样式 */ .nav-container { display: flex; justify-content: space-between; /* Logo 左菜单右 */ align-items: center; background-color: #333; padding: 10px 20px; } /* Class 选择器导航链接通用样式 */ .nav-link { color: white; text-decoration: none; margin-left: 20px; } /* ID 选择器Logo 单独样式 */ #logo { font-size: 24px; font-weight: bold; color: #4CAF50; } /* ID 选择器登录按钮特殊样式 */ #login-btn { background-color: #4CAF50; padding: 5px 15px; border-radius: 4px; } /style /head body !-- 导航栏容器 -- nav classnav-container !-- Logo唯一标识用 ID -- a href# idlogo我的网站/a !-- 导航链接组复用样式用 Class -- div a href# classnav-link首页/a a href# classnav-link产品/a a href# classnav-link idlogin-btn登录/a /div /nav /body /html五、Flexbox 属性汇总表格速查表为了方便查阅将容器和项目属性整理成汇总表格分类属性名核心作用常用值推荐容器属性flex-direction排列方向row水平、column垂直justify-content主轴对齐center居中、space-between两端对齐align-items交叉轴对齐center垂直居中flex-wrap是否换行wrap自动换行项目属性flex-grow放大比例1平均分配、2占 2 份flex-shrink缩小比例0禁止缩小flex-basis初始大小200px固定宽度、auto自适应align-self单独对齐center单独居中Flexbox 的核心在于“容器控整体项目调个体”用Class 选择器复用容器和通用项目的样式减少代码冗余用ID 选择器精准控制特殊元素如 Logo、按钮实现个性化布局。