第3章：Flex布局核心术语

在学习Flex布局的具体属性之前，我们需要先了解Flex布局的核心术语。这些术语是理解后续所有属性的基础，必须牢记。

3.1 容器（Flex Container）

容器是指开启了Flex布局的父元素。当一个元素设置了 display: flex 或 display: inline-flex 时，它就成为了一个Flex容器。

css

.container {
  display: flex; /* 开启Flex布局，成为Flex容器 */
}

3.2 项目（Flex Item）

项目是指Flex容器内的直接子元素。这些子元素会自动成为Flex项目，受到Flex布局规则的影响。

html

<div class="container">
  <div class="item">项目1</div> <!-- Flex项目 -->
  <div class="item">项目2</div> <!-- Flex项目 -->
  <div class="item">项目3</div> <!-- Flex项目 -->
</div>

3.3 主轴（Main Axis）

主轴是Flex项目排列的主要方向。默认情况下，主轴是水平方向，从左到右。

你可以通过 flex-direction 属性来改变主轴的方向。

3.4 交叉轴（Cross Axis）

交叉轴是与主轴垂直的方向。默认情况下，交叉轴是垂直方向，从上到下。

交叉轴的方向会随着主轴方向的改变而自动调整。例如，如果主轴是垂直方向，那么交叉轴就是水平方向。

3.5 主轴起点/终点、交叉轴起点/终点

主轴起点：主轴的开始位置
主轴终点：主轴的结束位置
交叉轴起点：交叉轴的开始位置
交叉轴终点：交叉轴的结束位置

这些位置会根据 flex-direction 的值而变化。例如：

flex-direction: row：主轴起点在左侧，终点在右侧
flex-direction: row-reverse：主轴起点在右侧，终点在左侧
flex-direction: column：主轴起点在顶部，终点在底部
flex-direction: column-reverse：主轴起点在底部，终点在顶部

3.6 核心术语实操验证

让我们通过一个简单的例子来可视化这些核心术语：

代码示例

html

<!DOCTYPE html>
<html>
<head>
  <title>Flex布局核心术语</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      height: 300px;
      background-color: #f0f0f0;
      border: 2px solid #333;
      position: relative;
    }
    
    .item {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
    }
    
    /* 可视化主轴和交叉轴 */
    .axis-labels {
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    
    .main-axis {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      height: 2px;
      background-color: red;
    }
    
    .main-axis::after {
      content: '主轴 (Main Axis)';
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      color: red;
      font-size: 12px;
    }
    
    .cross-axis {
      position: absolute;
      top: 10px;
      bottom: 10px;
      left: 50%;
      width: 2px;
      background-color: blue;
    }
    
    .cross-axis::after {
      content: '交叉轴 (Cross Axis)';
      position: absolute;
      top: 50%;
      left: 5px;
      transform: translateY(-50%);
      color: blue;
      font-size: 12px;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <h1>Flex布局核心术语</h1>
  <div class="container">
    <div class="axis-labels">
      <div class="main-axis"></div>
      <div class="cross-axis"></div>
    </div>
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
  </div>
  <p><strong>容器</strong>：灰色背景的大框</p>
  <p><strong>项目</strong>：蓝色的小方块</p>
  <p><strong>主轴</strong>：红色水平线，项目沿着这条线排列</p>
  <p><strong>交叉轴</strong>：蓝色垂直线，与主轴垂直</p>
</body>
</html>

效果说明

红色线表示主轴（水平方向）
蓝色线表示交叉轴（垂直方向）
三个蓝色方块是Flex项目，沿着主轴排列
整个灰色区域是Flex容器

不同flex-direction值的效果

尝试修改 flex-direction 的值，观察主轴和交叉轴的变化：

flex-direction: row（默认）：主轴水平，从左到右
flex-direction: row-reverse：主轴水平，从右到左
flex-direction: column：主轴垂直，从上到下
flex-direction: column-reverse：主轴垂直，从下到上

核心术语总结

术语	描述
容器（Container）	开启Flex布局的父元素
项目（Item）	容器内的直接子元素
主轴（Main Axis）	项目排列的主要方向
交叉轴（Cross Axis）	与主轴垂直的方向
主轴起点/终点	主轴的开始和结束位置
交叉轴起点/终点	交叉轴的开始和结束位置

理解这些核心术语是学习Flex布局的基础。在接下来的章节中，我们将学习如何通过各种属性来控制这些元素的行为，从而实现各种复杂的布局效果。

第3章：Flex布局核心术语 ​

3.1 容器（Flex Container） ​

3.2 项目（Flex Item） ​

3.3 主轴（Main Axis） ​

3.4 交叉轴（Cross Axis） ​

3.5 主轴起点/终点、交叉轴起点/终点 ​

3.6 核心术语实操验证 ​

代码示例 ​

效果说明 ​

不同flex-direction值的效果 ​

核心术语总结 ​