弹性布局（Flex布局，现代布局首选，简单高效）

13.1 Flex布局的定义

什么是Flex布局？

Flex（Flexible Box）布局是一种一维布局模型，可以轻松实现元素的排列、对齐和分布空间。

Flex布局的核心概念

Flex容器：使用 display: flex 的元素
Flex项目：Flex容器的直接子元素
主轴：Flex项目的排列方向
交叉轴：垂直于主轴的方向

13.2 开启Flex布局

语法

css

容器 {
  display: flex;
}

示例

css

.flex-container {
  display: flex;
  background-color: #f5f5f5;
}

.flex-item {
  padding: 20px;
  background-color: #3498db;
  color: white;
  margin: 10px;
}

13.3 容器属性

flex-direction（排列方向）

定义：设置Flex项目的排列方向。

语法：

css

容器 {
  flex-direction: 方向;
}

常用值：

row：水平排列（默认值）
row-reverse：水平反向排列
column：垂直排列
column-reverse：垂直反向排列

示例：

css

.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

justify-content（水平对齐）

定义：设置Flex项目在主轴上的对齐方式。

语法：

css

容器 {
  justify-content: 对齐方式;
}

常用值：

flex-start：左对齐（默认值）
flex-end：右对齐
center：居中对齐
space-between：两端对齐
space-around：均匀分布
space-evenly：完全均匀分布

示例：

css

.center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

align-items（垂直对齐）

定义：设置Flex项目在交叉轴上的对齐方式。

语法：

css

容器 {
  align-items: 对齐方式;
}

常用值：

stretch：拉伸填满（默认值）
flex-start：顶部对齐
flex-end：底部对齐
center：居中对齐
baseline：基线对齐

示例：

css

.vertical-center {
  align-items: center;
}

flex-wrap（换行）

定义：设置Flex项目是否换行。

语法：

css

容器 {
  flex-wrap: 换行方式;
}

常用值：

nowrap：不换行（默认值）
wrap：换行
wrap-reverse：反向换行

示例：

css

.wrap {
  flex-wrap: wrap;
}

13.4 项目属性

flex（项目占比）

定义：设置Flex项目的占比，实现自适应布局。

语法：

css

项目 {
  flex: 增长比例 收缩比例 基础大小;
}

示例：

css

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

align-self（单独对齐）

定义：单独控制某个项目的垂直对齐方式。

语法：

css

项目 {
  align-self: 对齐方式;
}

示例：

css

.align-center {
  align-self: center;
}

13.5 实战：用Flex布局制作响应式导航栏、商品卡片列表

实战目标

使用Flex布局创建响应式导航栏和商品卡片列表。

实战步骤

创建HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Flex布局实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <!-- Flex导航栏 -->
  <nav class="flex-nav">
    <div class="logo">Logo</div>
    <ul class="nav-items">
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">关于</a></li>
    </ul>
    <button class="nav-btn">登录</button>
  </nav>
  
  <!-- 商品卡片列表 -->
  <div class="products-container">
    <h2>热门商品</h2>
    <div class="products-list">
      <div class="product-card">
        <div class="product-image">商品图片</div>
        <h3>商品1</h3>
        <p>商品描述...</p>
        <span class="price">¥99</span>
      </div>
      <div class="product-card">
        <div class="product-image">商品图片</div>
        <h3>商品2</h3>
        <p>商品描述...</p>
        <span class="price">¥199</span>
      </div>
      <div class="product-card">
        <div class="product-image">商品图片</div>
        <h3>商品3</h3>
        <p>商品描述...</p>
        <span class="price">¥299</span>
      </div>
      <div class="product-card">
        <div class="product-image">商品图片</div>
        <h3>商品4</h3>
        <p>商品描述...</p>
        <span class="price">¥399</span>
      </div>
    </div>
  </div>
</body>
</html>

添加CSS样式：

css

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f5f5f5;
}

/* Flex导航栏 */
.flex-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #333;
  color: white;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav-items {
  display: flex;
  list-style: none;
  gap: 30px;
}

.nav-items a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-items a:hover {
  color: #3498db;
}

.nav-btn {
  padding: 8px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 商品容器 */
.products-container {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
}

.products-container h2 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

/* 商品列表 - Flex布局 */
.products-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* 商品卡片 */
.product-card {
  flex: 1;
  min-width: 250px;
  max-width: 300px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  width: 100%;
  height: 150px;
  background-color: #e3f2fd;
  border-radius: 8px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

.product-card h3 {
  color: #333;
  margin-bottom: 10px;
}

.product-card p {
  color: #666;
  margin-bottom: 15px;
}

.price {
  font-size: 24px;
  font-weight: bold;
  color: #e74c3c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .flex-nav {
    flex-direction: column;
    gap: 15px;
  }
  
  .nav-items {
    gap: 15px;
  }
  
  .product-card {
    min-width: 100%;
  }
}

运行页面：在浏览器中打开文件，观察效果

预期效果

导航栏：使用Flex布局实现水平排列，两端对齐
商品卡片：使用Flex布局实现响应式网格，自动换行

弹性布局（Flex布局，现代布局首选，简单高效） ​

13.1 Flex布局的定义 ​

什么是Flex布局？ ​

Flex布局的核心概念 ​

13.2 开启Flex布局 ​

语法 ​

示例 ​

13.3 容器属性 ​

flex-direction（排列方向） ​

justify-content（水平对齐） ​

align-items（垂直对齐） ​

flex-wrap（换行） ​

13.4 项目属性 ​

flex（项目占比） ​

align-self（单独对齐） ​

13.5 实战：用Flex布局制作响应式导航栏、商品卡片列表 ​

实战目标 ​

实战步骤 ​

预期效果 ​

弹性布局（Flex布局，现代布局首选，简单高效）

13.1 Flex布局的定义

什么是Flex布局？

Flex布局的核心概念

13.2 开启Flex布局

语法

示例

13.3 容器属性

flex-direction（排列方向）

justify-content（水平对齐）

align-items（垂直对齐）

flex-wrap（换行）

13.4 项目属性

flex（项目占比）

align-self（单独对齐）

13.5 实战：用Flex布局制作响应式导航栏、商品卡片列表

实战目标

实战步骤

预期效果