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

一、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`（单独居中）

Flexbox 的核心在于 "容器控整体，项目调个体"：

用 Class 选择器 复用容器和通用项目的样式，减少代码冗余；
用 ID 选择器 精准控制特殊元素（如 Logo、按钮），实现个性化布局。