当前位置：首页 > news >正文

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

news 2026/5/12 20:35:37

一、Flex 布局基础：容器与项目

Flex 布局由Flex 容器（父元素）和Flex 项目（子元素）组成。通过给父元素设置display: flex即可开启弹性布局。

1.1 核心概念

Flex 容器：设置了display: flex的父元素，控制子元素的排列方式。
Flex 项目：容器内的直接子元素，自动成为弹性项目，可通过属性调整自身大小和位置。

二、Flex 容器属性（Class 选择器复用）

容器属性用于控制所有子元素的整体排列规则，适合用Class 选择器实现样式复用。

2.1 常用容器属性表

属性名	可选值	作用说明
`flex-direction`	`row`（默认）、`column`、`row-reverse`	定义项目的排列方向（水平 / 垂直）
`justify-content`	`flex-start`、`center`、`space-between`	定义项目在主轴上的对齐方式
`align-items`	`flex-start`、`center`、`stretch`	定义项目在交叉轴上的对齐方式
`flex-wrap`	`nowrap`（默认）、`wrap`	定义项目是否换行

2.2 代码示例：Class 选择器实现容器样式

<!-- HTML：用 Class 标识 Flex 容器 --> <div class="flex-container"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div>

/* CSS：Class 选择器复用容器样式 */ .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-self`	`flex-start`、`center`、`flex-end`	单独控制当前项目在交叉轴的对齐方式

3.2 代码示例：ID 选择器控制单个项目

<!-- HTML：用 ID 标识需要单独控制的项目 --> <div class="flex-container"> <div class="item" id="item1">项目1（放大）</div> <div class="item" id="item2">项目2（垂直靠下）</div> <div class="item" id="item3">项目3（固定宽度）</div> </div>

/* CSS：ID 选择器精准控制单个项目 */ #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 class="nav-container"> <!-- Logo（唯一标识用 ID） --> <a href="#" id="logo">我的网站</a> <!-- 导航链接组（复用样式用 Class） --> <div> <a href="#" class="nav-link">首页</a> <a href="#" class="nav-link">产品</a> <a href="#" class="nav-link" id="login-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`（单独居中）