CSS3学习教程，从入门到精通，CSS3 弹性盒子(Flexbox)布局全面指南（20）

CSS3 弹性盒子(Flexbox)布局全面指南

一、Flexbox 概述

Flexbox（弹性盒子）是 CSS3 提供的一种一维布局模型，可以轻松实现各种复杂的页面布局。它特别适合处理不同屏幕尺寸下的元素排列和对齐问题。

主要优势：

简单实现垂直居中
轻松创建等高的列
自动分配剩余空间
改变元素显示顺序而不影响HTML结构
响应式设计更加简单

二、Flexbox 基本概念

1. Flex 容器 (Flex Container)

设置了 display: flex 或 display: inline-flex 的元素成为 flex 容器。

2. Flex 项目 (Flex Items)

flex 容器内的直接子元素自动成为 flex 项目。

3. 主轴 (Main Axis) 和交叉轴 (Cross Axis)

主轴：flex 项目的排列方向
交叉轴：与主轴垂直的方向

三、Flex 容器属性

1. display

定义 flex 容器。

.container {
  display: flex; /* 块级 flex 容器 */
  display: inline-flex; /* 行内 flex 容器 */
}

2. flex-direction

定义主轴方向。

.container {
  flex-direction: row; /* 默认值，水平方向，从左到右 */
  flex-direction: row-reverse; /* 水平方向，从右到左 */
  flex-direction: column; /* 垂直方向，从上到下 */
  flex-direction: column-reverse; /* 垂直方向，从下到上 */
}

3. flex-wrap

定义 flex 项目是否换行。

.container {
  flex-wrap: nowrap; /* 默认值，不换行 */
  flex-wrap: wrap; /* 换行，第一行在上方 */
  flex-wrap: wrap-reverse; /* 换行，第一行在下方 */
}

4. flex-flow

flex-direction 和 flex-wrap 的简写。

.container {
  flex-flow: row wrap; /* 方向为row，允许换行 */
}

5. justify-content

定义主轴上的对齐方式。

.container {
  justify-content: flex-start; /* 默认值，向主轴起点对齐 */
  justify-content: flex-end; /* 向主轴终点对齐 */
  justify-content: center; /* 居中对齐 */
  justify-content: space-between; /* 两端对齐，项目间间隔相等 */
  justify-content: space-around; /* 每个项目两侧间隔相等 */
  justify-content: space-evenly; /* 项目间和两端间隔完全相等 */
}

6. align-items

定义交叉轴上的对齐方式。

.container {
  align-items: stretch; /* 默认值，拉伸填满容器高度 */
  align-items: flex-start; /* 向交叉轴起点对齐 */
  align-items: flex-end; /* 向交叉轴终点对齐 */
  align-items: center; /* 居中对齐 */
  align-items: baseline; /* 基线对齐 */
}

7. align-content

定义多根轴线的对齐方式（只有一根轴线时无效）。

.container {
  align-content: stretch; /* 默认值，轴线占满整个交叉轴 */
  align-content: flex-start; /* 向交叉轴起点对齐 */
  align-content: flex-end; /* 向交叉轴终点对齐 */
  align-content: center; /* 居中对齐 */
  align-content: space-between; /* 两端对齐，轴线间间隔相等 */
  align-content: space-around; /* 每根轴线两侧间隔相等 */
}

四、Flex 项目属性

1. order

定义项目的排列顺序，数值越小越靠前。

.item {
  order: 0; /* 默认值 */
}

2. flex-grow

定义项目的放大比例，默认为0（不放大）。

.item {
  flex-grow: 1; /* 如果有剩余空间，项目将放大 */
}

3. flex-shrink

定义项目的缩小比例，默认为1（空间不足时缩小）。

.item {
  flex-shrink: 0; /* 空间不足时也不缩小 */
}

4. flex-basis

定义在分配多余空间之前，项目占据的主轴空间。

.item {
  flex-basis: auto; /* 默认值，项目本来的大小 */
  flex-basis: 200px; /* 固定宽度 */
}

5. flex

flex-grow, flex-shrink 和 flex-basis 的简写。

.item {
  flex: 1; /* 相当于 flex: 1 1 0% */
  flex: 1 1 auto; /* 相当于 flex-grow: 1, flex-shrink: 1, flex-basis: auto */
}

6. align-self

允许单个项目有与其他项目不一样的对齐方式。

.item {
  align-self: auto; /* 默认值，继承父容器的align-items */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
}

五、Flexbox 实战案例

案例1：基础 Flex 布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 基础布局</title>
  <style>
    /* 重置样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    /* Flex 容器 */
    .container {
      display: flex; /* 启用 Flexbox */
      flex-direction: row; /* 主轴方向为水平 */
      flex-wrap: wrap; /* 允许换行 */
      justify-content: space-between; /* 主轴对齐方式 */
      align-items: center; /* 交叉轴对齐方式 */
      height: 300px;
      background-color: #f5f5f5;
      padding: 10px;
      border: 1px solid #ddd;
    }
    
    /* Flex 项目 */
    .item {
      width: 100px;
      height: 100px;
      background-color: #4CAF50;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      margin: 5px;
    }
    
    /* 特殊项目 */
    .item.special {
      align-self: flex-end; /* 单独设置对齐方式 */
      background-color: #2196F3;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item special">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</body>
</html>

案例2：响应式导航栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 响应式导航</title>
  <style>
    /* 重置样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
    }
    
    /* 导航容器 */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #333;
      padding: 1rem;
      flex-wrap: wrap;
    }
    
    /* 品牌logo */
    .brand {
      color: white;
      font-size: 1.5rem;
      text-decoration: none;
      padding: 0.5rem;
    }
    
    /* 导航链接容器 */
    .nav-links {
      display: flex;
      list-style: none;
    }
    
    /* 导航链接 */
    .nav-links a {
      color: white;
      text-decoration: none;
      padding: 0.5rem 1rem;
      display: block;
    }
    
    .nav-links a:hover {
      background-color: #555;
      border-radius: 4px;
    }
    
    /* 汉堡菜单按钮 */
    .toggle-button {
      display: none;
      flex-direction: column;
      justify-content: space-between;
      width: 30px;
      height: 21px;
      cursor: pointer;
    }
    
    .toggle-button .bar {
      height: 3px;
      width: 100%;
      background-color: white;
      border-radius: 10px;
    }
    
    /* 响应式设计 - 移动端 */
    @media (max-width: 768px) {
      .toggle-button {
        display: flex;
      }
      
      .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
      }
      
      .navbar {
        flex-direction: column;
        align-items: flex-start;
      }
      
      .nav-links.active {
        display: flex;
      }
      
      .nav-links li {
        text-align: center;
        padding: 0.5rem;
      }
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <a href="#" class="brand">FlexNav</a>
    
    <div class="toggle-button">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </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>
  
  <script>
    // 汉堡菜单点击事件
    const toggleButton = document.querySelector('.toggle-button');
    const navLinks = document.querySelector('.nav-links');
    
    toggleButton.addEventListener('click', () => {
      navLinks.classList.toggle('active');
    });
  </script>
</body>
</html>

案例3：圣杯布局（Holy Grail Layout）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 圣杯布局</title>
  <style>
    /* 重置样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    /* 头部样式 */
    header {
      background-color: #4CAF50;
      color: white;
      padding: 1rem;
      text-align: center;
    }
    
    /* 主要内容容器 */
    .main-container {
      display: flex;
      flex: 1;
    }
    
    /* 侧边栏 */
    aside {
      flex: 0 0 200px;
      background-color: #333;
      color: white;
      padding: 1rem;
    }
    
    /* 左侧边栏 */
    .left-sidebar {
      order: -1; /* 移动到最左边 */
    }
    
    /* 主内容区 */
    main {
      flex: 1;
      padding: 1rem;
      background-color: #f9f9f9;
    }
    
    /* 右侧边栏 */
    .right-sidebar {
      /* 默认顺序 */
    }
    
    /* 页脚 */
    footer {
      background-color: #333;
      color: white;
      padding: 1rem;
      text-align: center;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
      .main-container {
        flex-direction: column;
      }
      
      aside {
        flex: 0 0 auto;
        order: 0; /* 重置顺序 */
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>圣杯布局</h1>
    <p>使用 Flexbox 实现</p>
  </header>
  
  <div class="main-container">
    <main>
      <h2>主内容区</h2>
      <p>这里是页面的主要内容区域。</p>
      <p>Flexbox 可以轻松实现这种经典的三栏布局，并且很容易实现响应式设计。</p>
    </main>
    
    <aside class="left-sidebar">
      <h3>左侧边栏</h3>
      <ul>
        <li>导航项1</li>
        <li>导航项2</li>
        <li>导航项3</li>
      </ul>
    </aside>
    
    <aside class="right-sidebar">
      <h3>右侧边栏</h3>
      <p>这里可以放置广告或其他内容。</p>
    </aside>
  </div>
  
  <footer>
    <p>© 2023 Flexbox 圣杯布局示例</p>
  </footer>
</body>
</html>

案例4：等高卡片布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 等高卡片</title>
  <style>
    /* 重置样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      background-color: #f5f5f5;
    }
    
    /* 卡片容器 */
    .card-container {
      display: flex;
      gap: 1rem; /* 卡片间距 */
      flex-wrap: wrap;
      justify-content: center;
    }
    
    /* 卡片样式 */
    .card {
      flex: 1; /* 自动分配空间 */
      min-width: 250px; /* 最小宽度 */
      max-width: 350px; /* 最大宽度 */
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column; /* 垂直排列内容 */
    }
    
    /* 卡片图片 */
    .card-img {
      height: 150px;
      background-color: #ddd;
      border-radius: 8px 8px 0 0;
      overflow: hidden;
    }
    
    .card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* 卡片内容 */
    .card-content {
      padding: 1rem;
      flex: 1; /* 使内容区域自动填充剩余空间 */
      display: flex;
      flex-direction: column;
    }
    
    .card-title {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }
    
    .card-text {
      color: #666;
      margin-bottom: 1rem;
      flex: 1; /* 文本区域自动填充 */
    }
    
    .card-button {
      display: inline-block;
      padding: 0.5rem 1rem;
      background-color: #4CAF50;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      text-align: center;
      align-self: flex-start; /* 按钮左对齐 */
    }
    
    .card-button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">
      <div class="card-img">
        <img src="https://via.placeholder.com/350x150" alt="Placeholder">
      </div>
      <div class="card-content">
        <h3 class="card-title">卡片标题1</h3>
        <p class="card-text">这里是卡片的内容描述。Flexbox 可以轻松实现等高卡片布局，无论每张卡片的内容多少，它们的高度都会保持一致。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
    
    <div class="card">
      <div class="card-img">
        <img src="https://via.placeholder.com/350x150" alt="Placeholder">
      </div>
      <div class="card-content">
        <h3 class="card-title">卡片标题2</h3>
        <p class="card-text">这里是卡片的内容描述。这个卡片的内容稍微少一些。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
    
    <div class="card">
      <div class="card-img">
        <img src="https://via.placeholder.com/350x150" alt="Placeholder">
      </div>
      <div class="card-content">
        <h3 class="card-title">卡片标题3</h3>
        <p class="card-text">这里是卡片的内容描述。这个卡片的内容更多一些，用来展示 Flexbox 如何保持卡片高度一致。无论内容多少，所有卡片都会保持相同的高度，使布局更加整洁美观。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
  </div>
</body>
</html>

六、Flexbox 常见问题与解决方案

1. 浏览器兼容性

Flexbox 在现代浏览器中有很好的支持，但在旧版浏览器（如 IE10 及以下）中可能需要前缀：

.container {
  display: -webkit-box; /* 旧版 Safari, iOS, Android */
  display: -moz-box; /* 旧版 Firefox */
  display: -ms-flexbox; /* IE10 */
  display: -webkit-flex; /* Chrome <21, Safari 6.1+, iOS Safari 7+ */
  display: flex; /* 标准语法 */
}

2. 内容溢出问题

当 flex 项目包含不可换行的文本时，可能导致溢出：

.item {
  min-width: 0; /* 修复文本溢出问题 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

3. 等分空间问题

使用 flex: 1 可以让项目等分空间，但要注意设置 min-width 或 flex-basis：

.item {
  flex: 1;
  min-width: 0; /* 确保内容不会撑大项目 */
}

4. 垂直居中

Flexbox 最常用的功能之一就是轻松实现垂直居中：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 必须有明确高度 */
}

七、Flexbox 最佳实践

合理使用简写属性：
- 优先使用 flex 简写而不是单独设置 flex-grow, flex-shrink, flex-basis
注意性能：
- Flexbox 布局性能通常很好，但在大型复杂布局中要注意嵌套层次
结合媒体查询：
- 使用媒体查询调整 flex 方向或项目大小，实现响应式设计
命名与组织：
- 为 flex 容器和项目使用有意义的类名
- 将 flex 相关样式组织在一起，便于维护
渐进增强：
- 为不支持 Flexbox 的浏览器提供后备布局方案
  通过掌握这些 Flexbox 的知识点和实践案例，你可以轻松创建各种复杂的页面布局，并实现优秀的响应式设计效果。