Flexbox布局中align-items属性的flex-start与start值有何差异？

首先纠正：你看到的“start和flex-start效果相同但已过时”的说法并不准确，二者的本质定位和适用场景有明显区别，且start是更现代的CSS对齐标准，并非过时属性。

核心区别 #

• 专属vs通用
  • flex-start是Flexbox布局特有的对齐关键字，仅能用于flex容器的对齐属性中
  • start是CSS Box Alignment模块定义的通用对齐关键字，除了Flex，还支持Grid布局、多列布局等多种容器类型，是CSS对齐体系的统一标准

为什么你测试时没看到差异？ #

在默认排版规则（writing-mode: horizontal-tb、direction: ltr）下，Flex容器的交叉轴起始端和通用的逻辑起始端完全重合，所以align-items: start和flex-start的视觉表现完全一致。不管你把flex-direction改成row还是column，只要不修改排版方向，这种重合状态就不会变，自然看不到差异。

如何看到二者的差异？ #

当修改排版模式（比如设置垂直排版），二者的区别就会显现出来。比如下面这个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
            flex-direction: column;
            height: 200px;
            align-items: start; 
            border: 1px solid #ccc;
            margin-bottom: 20px;
            writing-mode: vertical-rl; /* 修改为垂直排版 */
        }

        .flex-start-container {
            display: flex;
            flex-direction: column;
            height: 200px;
            align-items: flex-start; 
            border: 1px solid #ccc;
            writing-mode: vertical-rl; /* 修改为垂直排版 */
        }

        .item {
            width: 50px;
            height: 100px;
            background-color: lightblue;
            border: 1px solid blue;
            margin: 5px;
        }
    </style>
    <title>align-items差异演示</title>
</head>
<body>
    <h2>align-items: start</h2>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h2>align-items: flex-start</h2>
    <div class="flex-start-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

在这个示例里，因为设置了writing-mode: vertical-rl，start会指向垂直排版的逻辑起始端（右侧），而flex-start则基于Flex的交叉轴起始端（此时交叉轴为水平方向，起始端为左侧），两个容器内的元素对齐位置会明显不同。

总结 #

• 常规排版下二者视觉表现一致，但本质定位不同
• start是通用对齐标准，并非过时属性，推荐在现代布局中优先使用
• 只有在特殊排版方向下，二者的差异才会显现

内容的提问来源于stack exchange，提问作者holy