第11章：基础实战

在本节中，我们将通过几个常见的实战案例来巩固所学的Flex布局知识，包括水平居中、垂直居中、导航栏布局和卡片布局。

实战1：水平居中布局

水平居中是Web开发中最常见的布局需求之一，使用Flex布局可以轻松实现。

11.1 单元素水平居中

html

<!DOCTYPE html>
<html>
<head>
  <title>水平居中</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    .item {
      width: 200px;
      height: 100px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>单元素水平居中</h1>
  <div class="container">
    <div class="item">水平居中的元素</div>
  </div>
</body>
</html>

11.2 多元素水平居中、均匀分布

html

<!DOCTYPE html>
<html>
<head>
  <title>多元素水平居中</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      gap: 20px;
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    .item {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>多元素水平居中</h1>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

11.3 实操代码讲解与优化

使用 justify-content: center 实现水平居中
使用 gap 属性控制元素之间的间距
对于多个元素，可以根据需要选择不同的 justify-content 值，如 space-around 或 space-between

实战2：垂直居中布局

垂直居中在传统布局中比较困难，但使用Flex布局可以轻松实现。

11.4 单元素垂直居中

html

<!DOCTYPE html>
<html>
<head>
  <title>垂直居中</title>
  <style>
    .container {
      display: flex;
      align-items: center;
      height: 300px;
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    .item {
      width: 200px;
      height: 100px;
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>单元素垂直居中</h1>
  <div class="container">
    <div class="item">垂直居中的元素</div>
  </div>
</body>
</html>

11.5 元素水平+垂直双居中

html

<!DOCTYPE html>
<html>
<head>
  <title>水平垂直居中</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 400px;
      background-color: #f0f0f0;
    }
    
    .item {
      width: 250px;
      height: 150px;
      background-color: #2ecc71;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <h1>水平垂直双居中</h1>
  <div class="container">
    <div class="item">水平垂直居中的元素</div>
  </div>
</body>
</html>

11.6 实操代码讲解，解决垂直居中常见问题

使用 align-items: center 实现垂直居中
结合 justify-content: center 实现水平垂直双居中
确保容器有足够的高度，否则垂直居中效果不明显
对于行内元素，可以使用 display: inline-flex 来保持行内特性

实战3：导航栏布局

导航栏是网站的重要组成部分，使用Flex布局可以轻松实现各种导航栏布局。

11.7 导航栏结构搭建

html

<!DOCTYPE html>
<html>
<head>
  <title>导航栏布局</title>
  <style>
    .navbar {
      display: flex;
      background-color: #333;
      color: white;
      padding: 10px 20px;
    }
    
    .logo {
      font-size: 20px;
      font-weight: bold;
      margin-right: 20px;
    }
    
    .nav-links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .nav-links li {
      margin-right: 20px;
    }
    
    .nav-links a {
      color: white;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="nav-links">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</body>
</html>

11.8 导航项水平排列、均匀分布

html

<!DOCTYPE html>
<html>
<head>
  <title>导航栏均匀分布</title>
  <style>
    .navbar {
      display: flex;
      justify-content: space-between;
      background-color: #333;
      color: white;
      padding: 10px 20px;
    }
    
    .logo {
      font-size: 20px;
      font-weight: bold;
    }
    
    .nav-links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .nav-links li {
      margin-left: 20px;
    }
    
    .nav-links a {
      color: white;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="nav-links">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</body>
</html>

11.9 导航栏右侧对齐

html

<!DOCTYPE html>
<html>
<head>
  <title>导航栏右侧对齐</title>
  <style>
    .navbar {
      display: flex;
      background-color: #333;
      color: white;
      padding: 10px 20px;
    }
    
    .logo {
      font-size: 20px;
      font-weight: bold;
      margin-right: 20px;
    }
    
    .nav-links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .nav-links li {
      margin-right: 20px;
    }
    
    .nav-links a {
      color: white;
      text-decoration: none;
    }
    
    .login {
      margin-left: auto;
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="nav-links">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">服务</a></li>
    </ul>
    <div class="login"><a href="#" style="color: white; text-decoration: none;">登录</a></div>
  </nav>
</body>
</html>

11.10 响应式适配

html

<!DOCTYPE html>
<html>
<head>
  <title>响应式导航栏</title>
  <style>
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #333;
      color: white;
      padding: 10px 20px;
    }
    
    .logo {
      font-size: 20px;
      font-weight: bold;
    }
    
    .nav-links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .nav-links li {
      margin-left: 20px;
    }
    
    .nav-links a {
      color: white;
      text-decoration: none;
    }
    
    .menu-toggle {
      display: none;
      cursor: pointer;
    }
    
    @media (max-width: 768px) {
      .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: #333;
        padding: 20px;
      }
      
      .nav-links.active {
        display: flex;
      }
      
      .nav-links li {
        margin: 10px 0;
      }
      
      .menu-toggle {
        display: block;
      }
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="nav-links">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
    <div class="menu-toggle">☰</div>
  </nav>
  
  <script>
    document.querySelector('.menu-toggle').addEventListener('click', function() {
      document.querySelector('.nav-links').classList.toggle('active');
    });
  </script>
</body>
</html>

实战4：卡片布局

卡片布局在电商网站、博客等场景中非常常见，使用Flex布局可以轻松实现响应式卡片布局。

11.11 卡片容器搭建，设置换行

html

<!DOCTYPE html>
<html>
<head>
  <title>卡片布局</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }
    
    .card {
      flex: 1 1 300px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 20px;
    }
    
    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .card-content {
      margin-bottom: 15px;
    }
    
    .card-button {
      padding: 8px 16px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>卡片布局</h1>
  <div class="container">
    <div class="card">
      <div class="card-title">卡片 1</div>
      <div class="card-content">这是一张卡片，使用Flex布局实现。</div>
      <button class="card-button">查看详情</button>
    </div>
    <div class="card">
      <div class="card-title">卡片 2</div>
      <div class="card-content">这是另一张卡片，使用Flex布局实现。</div>
      <button class="card-button">查看详情</button>
    </div>
    <div class="card">
      <div class="card-title">卡片 3</div>
      <div class="card-content">这是第三张卡片，使用Flex布局实现。</div>
      <button class="card-button">查看详情</button>
    </div>
    <div class="card">
      <div class="card-title">卡片 4</div>
      <div class="card-content">这是第四张卡片，使用Flex布局实现。</div>
      <button class="card-button">查看详情</button>
    </div>
  </div>
</body>
</html>

11.12 卡片尺寸控制

html

<!DOCTYPE html>
<html>
<head>
  <title>卡片尺寸控制</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }
    
    .card {
      flex: 0 0 calc(33.333% - 20px);
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 20px;
    }
    
    @media (max-width: 768px) {
      .card {
        flex: 0 0 calc(50% - 20px);
      }
    }
    
    @media (max-width: 480px) {
      .card {
        flex: 0 0 100%;
      }
    }
    
    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .card-content {
      margin-bottom: 15px;
    }
    
    .card-button {
      padding: 8px 16px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>卡片尺寸控制</h1>
  <div class="container">
    <div class="card">
      <div class="card-title">卡片 1</div>
      <div class="card-content">这是一张卡片，使用Flex布局实现。</div>
      <button class="card-button">查看详情</button>
    </div>
    <div class="card">
      <div class="card-title">卡片 2</div>
      <div class="card-content">这是另一张卡片，使用Flex布局实现。</div>
      <button class="card-button">查看详情</button>
    </div>
    <div class="card">
      <div class="card-title">卡片 3</div>
      <div class="card-content">这是第三张卡片，使用Flex布局实现。</div>
      <button class="card-button">查看详情</button>
    </div>
  </div>
</body>
</html>

11.13 卡片间距设置

使用 gap 属性设置卡片之间的间距，如上面的代码所示。

11.14 卡片内部元素居中对齐

html

<!DOCTYPE html>
<html>
<head>
  <title>卡片内部对齐</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }
    
    .card {
      flex: 1 1 300px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .card-content {
      margin-bottom: 15px;
    }
    
    .card-button {
      padding: 8px 16px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>卡片内部对齐</h1>
  <div class="container">
    <div class="card">
      <div class="card-title">卡片 1</div>
      <div class="card-content">这是一张卡片，内部元素居中对齐。</div>
      <button class="card-button">查看详情</button>
    </div>
    <div class="card">
      <div class="card-title">卡片 2</div>
      <div class="card-content">这是另一张卡片，内部元素居中对齐。</div>
      <button class="card-button">查看详情</button>
    </div>
  </div>
</body>
</html>

实操练习

实现一个水平居中的登录表单
实现一个垂直居中的弹窗
实现一个响应式导航栏
实现一个响应式卡片布局

通过本节的学习，你已经掌握了Flex布局在常见场景中的应用。这些实战案例涵盖了Web开发中最常见的布局需求，通过练习这些案例，你可以更加熟练地使用Flex布局。

第11章：基础实战 ​

实战1：水平居中布局 ​

11.1 单元素水平居中 ​

11.2 多元素水平居中、均匀分布 ​

11.3 实操代码讲解与优化 ​

实战2：垂直居中布局 ​

11.4 单元素垂直居中 ​

11.5 元素水平+垂直双居中 ​

11.6 实操代码讲解，解决垂直居中常见问题 ​

实战3：导航栏布局 ​

11.7 导航栏结构搭建 ​

11.8 导航项水平排列、均匀分布 ​

11.9 导航栏右侧对齐 ​

11.10 响应式适配 ​

实战4：卡片布局 ​

11.11 卡片容器搭建，设置换行 ​

11.12 卡片尺寸控制 ​

11.13 卡片间距设置 ​

11.14 卡片内部元素居中对齐 ​

实操练习 ​

第11章：基础实战

实战1：水平居中布局

11.1 单元素水平居中

11.2 多元素水平居中、均匀分布

11.3 实操代码讲解与优化

实战2：垂直居中布局

11.4 单元素垂直居中

11.5 元素水平+垂直双居中

11.6 实操代码讲解，解决垂直居中常见问题

实战3：导航栏布局

11.7 导航栏结构搭建

11.8 导航项水平排列、均匀分布

11.9 导航栏右侧对齐

11.10 响应式适配

实战4：卡片布局

11.11 卡片容器搭建，设置换行

11.12 卡片尺寸控制

11.13 卡片间距设置

11.14 卡片内部元素居中对齐

实操练习