Flexbox 布局

核心知识点讲解

Flexbox（弹性布局）是 CSS3 中引入的一种一维布局模型，它允许你通过控制容器和项目的属性，创建灵活的布局结构。Flexbox 主要用于组件内部的布局和一维排列，非常适合处理导航栏、卡片布局、居中对齐等常见的布局需求。

基本概念

弹性容器（Flex Container）：应用 display: flex 或 display: inline-flex 的元素
弹性项目（Flex Item）：弹性容器的直接子元素
主轴（Main Axis）：弹性项目排列的主要方向
交叉轴（Cross Axis）：与主轴垂直的方向
主轴起点/终点：弹性项目在主轴上的起始和结束位置
交叉轴起点/终点：弹性项目在交叉轴上的起始和结束位置

容器属性

1. display

将元素设置为弹性容器：

.container {
  display: flex; /* 块级弹性容器 */
  /* 或 */
  display: inline-flex; /* 内联弹性容器 */
}

2. flex-direction

定义主轴的方向：

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

3. flex-wrap

定义弹性项目是否换行：

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

4. flex-flow

flex-direction 和 flex-wrap 的简写：

.container {
  flex-flow: row nowrap; /* 默认值 */
}

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; /* 行两侧间距相等 */
}

项目属性

1. order

定义弹性项目的排列顺序，默认为 0：

.item {
  order: 0; /* 默认值 */
  /* 或 */
  order: 1; /* 较大的值排在后面 */
  /* 或 */
  order: -1; /* 较小的值排在前面 */
}

2. flex-grow

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

.item {
  flex-grow: 0; /* 默认值，不放大 */
  /* 或 */
  flex-grow: 1; /* 放大比例为 1 */
}

3. flex-shrink

定义弹性项目的缩小比例，默认为 1（可缩小）：

.item {
  flex-shrink: 1; /* 默认值，可缩小 */
  /* 或 */
  flex-shrink: 0; /* 不可缩小 */
}

4. flex-basis

定义弹性项目在主轴上的初始大小：

.item {
  flex-basis: auto; /* 默认值，使用项目的内容大小 */
  /* 或 */
  flex-basis: 100px; /* 固定大小 */
  /* 或 */
  flex-basis: 50%; /* 百分比大小 */
}

5. flex

flex-grow、flex-shrink 和 flex-basis 的简写：

.item {
  flex: 0 1 auto; /* 默认值 */
  /* 或 */
  flex: 1; /* 相当于 flex: 1 1 0% */
  /* 或 */
  flex: auto; /* 相当于 flex: 1 1 auto */
  /* 或 */
  flex: none; /* 相当于 flex: 0 0 auto */
}

6. align-self

定义单个弹性项目在交叉轴上的对齐方式，覆盖容器的 align-items 属性：

.item {
  align-self: auto; /* 默认值，继承容器的 align-items */
  /* 或 */
  align-self: stretch; /* 拉伸填充 */
  /* 或 */
  align-self: flex-start; /* 交叉轴起点对齐 */
  /* 或 */
  align-self: flex-end; /* 交叉轴终点对齐 */
  /* 或 */
  align-self: center; /* 居中对齐 */
  /* 或 */
  align-self: baseline; /* 基线对齐 */
}

实用案例分析

案例一：水平居中导航栏

使用 Flexbox 创建水平居中的导航栏：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水平居中导航栏</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
    }

    header {
      background-color: #3498db;
      color: white;
      padding: 1rem 0;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .nav-container {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: bold;
      margin-right: auto;
    }

    nav ul {
      list-style: none;
      display: flex;
    }

    nav ul li {
      margin-left: 2rem;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    nav ul li a:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }

    @media (max-width: 768px) {
      .nav-container {
        flex-direction: column;
      }

      .logo {
        margin-right: 0;
        margin-bottom: 1rem;
      }

      nav ul {
        flex-direction: column;
        align-items: center;
      }

      nav ul li {
        margin-left: 0;
        margin-bottom: 0.5rem;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="container">
      <div class="nav-container">
        <div class="logo">网站名称</div>
        <nav>
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <main class="container">
    <h1>水平居中导航栏示例</h1>
    <p>本示例使用 Flexbox 创建了一个水平居中的导航栏。通过 justify-content: center 属性，我们可以使导航链接在水平方向上居中对齐。</p>
    <p>在响应式设计中，当屏幕宽度小于 768 像素时，导航栏会切换为垂直布局，以适应移动设备的屏幕尺寸。</p>
  </main>
</body>
</html>

案例二：卡片网格布局

使用 Flexbox 创建响应式卡片网格布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片网格布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    h1 {
      text-align: center;
      margin-bottom: 30px;
    }

    .card-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    .card {
      flex: 1 1 300px;
      max-width: 350px;
      background-color: #f4f4f4;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

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

    .card p {
      color: #666;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .card {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>卡片网格布局示例</h1>
    <div class="card-grid">
      <div class="card">
        <h3>卡片 1</h3>
        <p>这是一张使用 Flexbox 布局的卡片。通过 flex-wrap: wrap 和 gap 属性，我们可以创建一个响应式的卡片网格。</p>
      </div>
      <div class="card">
        <h3>卡片 2</h3>
        <p>Flexbox 的 flex: 1 1 300px 属性使得卡片在容器中有足够空间时会自动填充，同时保持最小宽度为 300px。</p>
      </div>
      <div class="card">
        <h3>卡片 3</h3>
        <p>当屏幕宽度变小时，卡片会自动换行，确保在任何设备上都能提供良好的用户体验。</p>
      </div>
      <div class="card">
        <h3>卡片 4</h3>
        <p>通过 justify-content: center 属性，我们可以使卡片在网格中水平居中对齐。</p>
      </div>
      <div class="card">
        <h3>卡片 5</h3>
        <p>Flexbox 是创建响应式卡片网格的理想选择，它比传统的浮动布局更加灵活和易于管理。</p>
      </div>
    </div>
  </div>
</body>
</html>

案例三：垂直居中内容

使用 Flexbox 实现内容的垂直居中：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直居中内容</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .container {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      text-align: center;
    }

    .hero {
      max-width: 800px;
      margin-bottom: 40px;
    }

    .hero h1 {
      font-size: 2.5rem;
      margin-bottom: 20px;
      color: #333;
    }

    .hero p {
      font-size: 1.2rem;
      margin-bottom: 30px;
      color: #666;
    }

    .btn {
      display: inline-block;
      padding: 12px 24px;
      background-color: #3498db;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      font-size: 1rem;
      transition: background-color 0.3s ease;
    }

    .btn:hover {
      background-color: #2980b9;
    }

    .features {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      max-width: 1200px;
    }

    .feature {
      flex: 1 1 300px;
      max-width: 350px;
      background-color: #f4f4f4;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

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

    .feature p {
      color: #666;
      line-height: 1.6;
    }

    footer {
      background-color: #333;
      color: white;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="hero">
      <h1>垂直居中内容示例</h1>
      <p>本示例使用 Flexbox 实现了内容的垂直居中。通过将容器设置为 display: flex，并使用 justify-content: center 和 align-items: center 属性，我们可以使内容在垂直和水平方向上都居中对齐。</p>
      <a href="#" class="btn">了解更多</a>
    </div>
    <div class="features">
      <div class="feature">
        <h3>特性 1</h3>
        <p>Flexbox 使得垂直居中变得简单直观，无需使用传统的表格布局或负边距技巧。</p>
      </div>
      <div class="feature">
        <h3>特性 2</h3>
        <p>通过 flex: 1 属性，我们可以使容器占据剩余的空间，确保内容在视口中垂直居中。</p>
      </div>
      <div class="feature">
        <h3>特性 3</h3>
        <p>Flexbox 是一种现代的布局技术，它提供了灵活的方式来排列和对齐元素，适用于各种布局场景。</p>
      </div>
    </div>
  </div>
  <footer>
    <p>&copy; 2023 网站名称. 保留所有权利.</p>
  </footer>
</body>
</html>

总结

Flexbox 布局是一种强大的一维布局系统，它具有以下优势：

灵活的排列方式：可以轻松实现水平和垂直方向的排列
强大的对齐能力：提供了丰富的对齐属性，实现内容的精确对齐
响应式设计支持：通过 flex-wrap 和媒体查询，可以创建响应式布局
简化的布局代码：相比传统的浮动布局，代码更加简洁和易于理解
动态空间分配：可以根据容器大小自动调整项目的大小和位置

Flexbox 布局的应用场景非常广泛，包括：

导航栏和菜单
卡片网格
表单布局
居中对齐内容
页眉和页脚
响应式组件

通过掌握 Flexbox 布局，你可以创建更加灵活、美观和响应式的网页布局，提高你的前端开发能力和效率。