如何用Flex布局将最后一个子元素移动到首位？

在Flex布局的实际使用中，调整子元素的排列顺序是常见需求，将最后一个子元素移动到首位不需要修改原有的HTML结构，通过Flex的相关属性就能快速实现。下面先介绍第一种常用方法。

方法一：使用order属性调整顺序

Flex布局的order属性用于定义子元素的排列顺序，默认值为0，数值越小的元素排列越靠前。我们只需要给最后一个子元素设置更小的order值，就能让它排到首位。

实现步骤

• 给父容器设置display: flex，开启Flex布局
• 给最后一个子元素设置order值为负数或者小于其他子元素的数值

代码示例

/* 父容器样式 */
.flex-container {
    display: flex;
    width: 100%;
    padding: 20px;
    background-color: #f5f5f5;
}

/* 普通子元素样式 */
.flex-item {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #409eff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 默认order为0 */
    order: 0;
}

/* 最后一个子元素样式 */
.flex-item:last-child {
    background-color: #f56c6c;
    /* 设置更小的order值，排到首位 */
    order: -1;
}

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>

上述代码中，最后一个子元素的order设置为-1，比默认的其他子元素order:0更小，因此会排列到所有子元素的最前面。

方法二：使用flex-direction反向排列

Flex布局的flex-direction属性用于定义主轴的方向，默认值是row即水平从左到右排列。如果将flex-direction设置为row-reverse，主轴方向会变为水平从右到左，此时原本最后一个子元素就会排到首位。

实现步骤

• 给父容器设置display: flex开启Flex布局
• 给父容器设置flex-direction: row-reverse，反转主轴排列方向

代码示例

/* 父容器样式 */
.flex-container {
    display: flex;
    /* 反转主轴方向，从右到左排列 */
    flex-direction: row-reverse;
    width: 100%;
    padding: 20px;
    background-color: #f5f5f5;
}

/* 子元素样式 */
.flex-item {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #409eff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>

这种方式会让所有子元素的排列顺序完全反转，原本的第一个子元素会排到最后，最后一个子元素排到首位。如果需要保持其他子元素的原有顺序，只移动最后一个元素，这种方法就不适用了。

两种方法的对比

注意事项

• 使用order属性时，数值可以是任意整数，只要保证目标元素的order值小于其他元素即可
• 如果子元素设置了order属性，排列顺序会优先按照order值排序，再按照HTML结构的顺序排列相同order值的元素
• 使用flex-direction: row-reverse时，如果子元素有水平方向的margin或者padding，排列效果也会跟随主轴方向反转，需要提前做好样式适配

Flex布局的顺序调整能力不需要修改HTML结构，在实际开发中可以根据需求选择合适的方法，优先选择对现有布局影响更小的方式实现需求。

Flex布局order属性flex-directionjustify-content修改时间：2026-07-09 12:09:28