编程马·菜鸟教程

Appearance

第16章：拓展学习方向 ​

在本节中，我们将介绍Flex布局的拓展学习方向，包括与Grid布局的对比、复杂布局实战以及前端框架中的应用。

16.1 Flex布局与Grid布局的区别 ​

核心区别 ​

特性Flex布局Grid布局
维度一维布局（只能在一个方向上排列项目）二维布局（可以同时在行列两个方向上排列项目）
适用场景适用于导航栏、卡片列表等线性布局适用于复杂的网格布局，如仪表盘、相册等
灵活性更适合处理单一方向的布局更适合处理复杂的二维布局
浏览器支持支持较好，IE10+支持相对较新，IE11+部分支持

选型参考 ​

  • 使用Flex布局的场景：

    • 导航栏布局
    • 水平居中对齐
    • 垂直居中对齐
    • 卡片列表布局
    • 简单的响应式布局

  • 使用Grid布局的场景：

    • 复杂的网格布局
    • 仪表盘布局
    • 相册布局
    • 不规则的多列布局
    • 需要精确控制行列的布局

代码示例对比 ​

Flex布局示例 ​

html
<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
  }
</style>

Grid布局示例 ​

html
<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
</style>

16.2 复杂布局实战 ​

结合Flex+Grid实现更灵活的页面 ​

在实际开发中，我们经常需要结合Flex布局和Grid布局来实现复杂的页面布局。

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>Flex+Grid复杂布局</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      background-color: #3498db;
      color: white;
    }
    
    .nav-links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .nav-links li {
      margin-left: 20px;
    }
    
    .main-content {
      display: grid;
      grid-template-columns: 250px 1fr 200px;
      min-height: calc(100vh - 80px);
    }
    
    .sidebar {
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    .content {
      padding: 20px;
    }
    
    .aside {
      background-color: #f9f9f9;
      padding: 20px;
    }
    
    .footer {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      background-color: #333;
      color: white;
    }
    
    @media (max-width: 768px) {
      .main-content {
        grid-template-columns: 1fr;
      }
      
      .sidebar,
      .aside {
        display: none;
      }
    }
  </style>
</head>
<body>
  <header class="header">
    <div class="logo">Logo</div>
    <ul class="nav-links">
      <li><a href="#" style="color: white; text-decoration: none;">首页</a></li>
      <li><a href="#" style="color: white; text-decoration: none;">关于</a></li>
      <li><a href="#" style="color: white; text-decoration: none;">服务</a></li>
      <li><a href="#" style="color: white; text-decoration: none;">联系我们</a></li>
    </ul>
  </header>
  
  <main class="main-content">
    <aside class="sidebar">
      <h3>侧边栏</h3>
      <ul>
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
      </ul>
    </aside>
    
    <section class="content">
      <h2>主内容区域</h2>
      <p>这里是主内容区域，使用Grid布局实现。</p>
    </section>
    
    <aside class="aside">
      <h3>右侧边栏</h3>
      <p>这里是右侧边栏。</p>
    </aside>
  </main>
  
  <footer class="footer">
    <p>© 2024 版权所有</p>
  </footer>
</body>
</html>

16.3 前端框架中的Flex布局应用 ​

Vue组件布局 ​

在Vue中，我们可以使用Flex布局来构建组件布局。

代码示例 ​

vue
<template>
  <div class="card">
    <div class="card-header">
      <h3>{{ title }}</h3>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
    <div class="card-footer">
      <button class="btn btn-primary">确定</button>
      <button class="btn btn-secondary">取消</button>
    </div>
  </div>
</template>

<style scoped>
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  width: 300px;
}

.card-header {
  background-color: #f5f5f5;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

.card-body {
  padding: 20px;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px;
  border-top: 1px solid #ddd;
  background-color: #f9f9f9;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background-color: #3498db;
  color: white;
}

.btn-secondary {
  background-color: #95a5a6;
  color: white;
}
</style>

React组件布局 ​

在React中，我们同样可以使用Flex布局来构建组件布局。

代码示例 ​

jsx
import React from 'react';
import './Card.css';

const Card = ({ title, children, onConfirm, onCancel }) => {
  return (
    <div className="card">
      <div className="card-header">
        <h3>{title}</h3>
      </div>
      <div className="card-body">
        {children}
      </div>
      <div className="card-footer">
        <button className="btn btn-primary" onClick={onConfirm}>
          确定
        </button>
        <button className="btn btn-secondary" onClick={onCancel}>
          取消
        </button>
      </div>
    </div>
  );
};

export default Card;
css
/* Card.css */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  width: 300px;
}

.card-header {
  background-color: #f5f5f5;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

.card-body {
  padding: 20px;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px;
  border-top: 1px solid #ddd;
  background-color: #f9f9f9;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background-color: #3498db;
  color: white;
}

.btn-secondary {
  background-color: #95a5a6;
  color: white;
}

实操练习 ​

  1. 对比Flex布局和Grid布局的使用场景
  2. 使用Flex+Grid结合实现一个复杂的页面布局
  3. 在Vue或React中使用Flex布局构建组件
  4. 实现一个响应式的仪表盘布局，结合Flex和Grid

通过本节的学习，你已经了解了Flex布局的拓展学习方向。Flex布局和Grid布局各有优势，在实际开发中可以根据具体需求选择合适的布局方式，甚至结合使用它们来实现更加复杂的布局效果。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建