编程马·菜鸟教程

Appearance

第5章：主轴方向与排列方式 ​

在Flex布局中，主轴方向和排列方式是控制项目布局的重要属性。通过 flex-direction 和 flex-wrap 属性，我们可以灵活地控制项目的排列方向和是否换行。

5.1 flex-direction：设置主轴方向 ​

flex-direction 属性用于设置主轴的方向，决定了项目的排列方向。它有以下4个常用值：

1. row（默认） ​

  • 主轴方向：水平方向，从左到右
  • 项目排列：从左到右排列

2. row-reverse ​

  • 主轴方向：水平方向，从右到左
  • 项目排列：从右到左排列

3. column ​

  • 主轴方向：垂直方向，从上到下
  • 项目排列：从上到下排列

4. column-reverse ​

  • 主轴方向：垂直方向，从下到上
  • 项目排列：从下到上排列

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>flex-direction 示例</title>
  <style>
    .container {
      display: flex;
      height: 200px;
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      margin: 10px 0;
      padding: 10px;
    }
    
    .row {
      flex-direction: row;
    }
    
    .row-reverse {
      flex-direction: row-reverse;
    }
    
    .column {
      flex-direction: column;
      height: 300px;
    }
    
    .column-reverse {
      flex-direction: column-reverse;
      height: 300px;
    }
    
    .item {
      width: 80px;
      height: 80px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>flex-direction 示例</h1>
  
  <h2>flex-direction: row（默认）</h2>
  <div class="container row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>flex-direction: row-reverse</h2>
  <div class="container row-reverse">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>flex-direction: column</h2>
  <div class="container column">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <h2>flex-direction: column-reverse</h2>
  <div class="container column-reverse">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

5.2 flex-wrap：控制项目是否换行 ​

flex-wrap 属性用于控制项目在容器空间不足时是否换行。它有以下3个值：

1. nowrap（默认） ​

  • 行为：不换行，项目会挤压变形以适应容器宽度
  • 适用场景：项目数量较少，容器宽度足够时

2. wrap ​

  • 行为：自动换行，溢出的项目会换到下一行
  • 适用场景：项目数量较多，需要多行显示时

3. wrap-reverse ​

  • 行为：反向换行，溢出的项目会换到上一行
  • 适用场景：需要特殊布局效果时

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>flex-wrap 示例</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      margin: 10px 0;
      padding: 10px;
    }
    
    .nowrap {
      flex-wrap: nowrap;
    }
    
    .wrap {
      flex-wrap: wrap;
    }
    
    .wrap-reverse {
      flex-wrap: wrap-reverse;
    }
    
    .item {
      width: 80px;
      height: 80px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>flex-wrap 示例</h1>
  
  <h2>flex-wrap: nowrap（默认）</h2>
  <div class="container nowrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <p>项目被挤压变形以适应容器宽度</p>
  
  <h2>flex-wrap: wrap</h2>
  <div class="container wrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <p>项目自动换行，保持原始尺寸</p>
  
  <h2>flex-wrap: wrap-reverse</h2>
  <div class="container wrap-reverse">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <p>项目反向换行，从下往上排列</p>
</body>
</html>

5.3 flex-flow：flex-direction + flex-wrap 简写 ​

flex-flow 是 flex-direction 和 flex-wrap 的简写属性，可以同时设置两个属性的值。

语法 ​

css
.container {
  flex-flow: <flex-direction> <flex-wrap>;
}

常用值 ​

  • flex-flow: row nowrap;（默认）
  • flex-flow: row wrap;
  • flex-flow: column nowrap;
  • flex-flow: column wrap;

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>flex-flow 示例</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      margin: 10px 0;
      padding: 10px;
    }
    
    .row-wrap {
      flex-flow: row wrap;
    }
    
    .column-wrap {
      flex-flow: column wrap;
      height: 200px;
      width: 400px;
    }
    
    .item {
      width: 80px;
      height: 80px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>flex-flow 示例</h1>
  
  <h2>flex-flow: row wrap</h2>
  <div class="container row-wrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  
  <h2>flex-flow: column wrap</h2>
  <div class="container column-wrap">
    <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>
</body>
</html>

5.4 实操案例：不同主轴方向+换行组合 ​

案例1：水平排列，自动换行 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>水平排列+自动换行</title>
  <style>
    .container {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px;
      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 class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

案例2：垂直排列，自动换行 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>垂直排列+自动换行</title>
  <style>
    .container {
      display: flex;
      flex-flow: column wrap;
      height: 300px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      width: 100px;
      height: 80px;
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
      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 class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
</body>
</html>

实操练习 ​

  1. 创建一个水平排列、自动换行的Flex容器，包含6个项目
  2. 创建一个垂直排列、自动换行的Flex容器，包含8个项目
  3. 尝试不同的 flex-direction 和 flex-wrap 组合，观察效果
  4. 使用 flex-flow 简写属性来设置布局

通过本节的学习，你已经掌握了如何控制Flex布局的主轴方向和排列方式。这些属性是Flex布局的基础，为后续的对齐和空间分配打下了基础。

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

基于 VitePress 构建