编程马·菜鸟教程

Appearance

第8章：项目排序与对齐 ​

在Flex布局中，我们可以通过 order 和 align-self 属性来控制单个项目的排序和对齐方式，实现更加灵活的布局效果。

8.1 order：控制项目的排列顺序 ​

order 属性控制Flex项目的排列顺序，数值越小，排列越靠前。

默认值 ​

  • 默认值：0
  • 所有项目默认按书写顺序排列

用法 ​

css
.item {
  order: <number>;
}

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>order 示例</title>
  <style>
    .container {
      display: flex;
      background-color: #f0f0f0;
      padding: 10px;
      margin: 10px 0;
    }
    
    .item {
      width: 80px;
      height: 80px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
      border-radius: 4px;
    }
    
    .item1 {
      order: 3;
    }
    
    .item2 {
      order: 1;
    }
    
    .item3 {
      order: 2;
    }
  </style>
</head>
<body>
  <h1>order 示例</h1>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  <p>原始顺序：1, 2, 3</p>
  <p>设置 order 后：2 (order:1), 3 (order:2), 1 (order:3)</p>
</body>
</html>

8.2 align-self：单独设置单个项目的交叉轴对齐方式 ​

align-self 属性允许单独设置单个项目的交叉轴对齐方式，它会覆盖容器的 align-items 属性。

常用值 ​

  • auto：继承容器的 align-items 值（默认）
  • flex-start：项目靠交叉轴起点对齐
  • flex-end：项目靠交叉轴终点对齐
  • center：项目在交叉轴居中对齐
  • stretch：项目拉伸至与容器交叉轴高度一致
  • baseline：项目按文字基线对齐

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>align-self 示例</title>
  <style>
    .container {
      display: flex;
      align-items: flex-start;
      height: 200px;
      background-color: #f0f0f0;
      padding: 10px;
      margin: 10px 0;
    }
    
    .item {
      width: 80px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
      border-radius: 4px;
    }
    
    .item1 {
      align-self: flex-start;
      height: 60px;
    }
    
    .item2 {
      align-self: center;
      height: 80px;
    }
    
    .item3 {
      align-self: flex-end;
      height: 100px;
    }
    
    .item4 {
      align-self: stretch;
    }
  </style>
</head>
<body>
  <h1>align-self 示例</h1>
  <div class="container">
    <div class="item item1">flex-start</div>
    <div class="item item2">center</div>
    <div class="item item3">flex-end</div>
    <div class="item item4">stretch</div>
  </div>
  <p>容器设置了 align-items: flex-start，但每个项目可以通过 align-self 单独设置对齐方式</p>
</body>
</html>

8.3 实战场景：调整特定项目排序与对齐 ​

案例：导航栏右侧对齐 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>导航栏右侧对齐</title>
  <style>
    .navbar {
      display: flex;
      background-color: #333;
      color: white;
      padding: 10px 20px;
    }
    
    .logo {
      font-size: 20px;
      font-weight: bold;
      margin-right: 20px;
    }
    
    .nav-links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .nav-links li {
      margin-right: 20px;
    }
    
    .nav-links a {
      color: white;
      text-decoration: none;
    }
    
    .login {
      margin-left: auto; /* 自动占据剩余空间，实现右侧对齐 */
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="nav-links">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">服务</a></li>
    </ul>
    <div class="login"><a href="#">登录</a></div>
  </nav>
</body>
</html>

案例：卡片布局中的特殊对齐 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>卡片布局</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 20px;
    }
    
    .card {
      width: 200px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 15px;
      margin: 10px;
      display: flex;
      flex-direction: column;
    }
    
    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .card-content {
      flex: 1;
      margin-bottom: 15px;
    }
    
    .card-button {
      align-self: flex-end;
      padding: 8px 16px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>卡片布局</h1>
  <div class="container">
    <div class="card">
      <div class="card-title">卡片 1</div>
      <div class="card-content">这是一张卡片，按钮在右下角。</div>
      <button class="card-button">查看详情</button>
    </div>
    <div class="card">
      <div class="card-title">卡片 2</div>
      <div class="card-content">这是另一张卡片，按钮同样在右下角。</div>
      <button class="card-button">查看详情</button>
    </div>
    <div class="card">
      <div class="card-title">卡片 3</div>
      <div class="card-content">这是第三张卡片，按钮也在右下角。</div>
      <button class="card-button">查看详情</button>
    </div>
  </div>
</body>
</html>

实操练习 ​

  1. 创建一个使用 order 属性调整项目顺序的布局
  2. 创建一个使用 align-self 属性调整单个项目对齐方式的布局
  3. 实现一个导航栏，其中登录按钮在右侧
  4. 实现一个卡片布局，其中按钮在卡片右下角

通过本节的学习，你已经掌握了如何控制单个项目的排序和对齐方式。这些属性可以帮助你实现更加灵活和个性化的布局效果，是Flex布局的重要组成部分。

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

基于 VitePress 构建