CSS元素位置的互换

方法一

使用Order属性设置弹性盒对象元素的顺序。

示例：将3个元素按倒序显示

flex-direction:

值	描述
row（默认值）	主轴为水平方向，起点在左端。
row-reverse	主轴为水平方向，起点在右端。
column	主轴为垂直方向，起点在上沿。
column-reverse	主轴为垂直方向，起点在下沿。

代码语言：javascript复制

.container {
    display: flex;
    flex-direction: column;
}
.container .first {
    order: 3;
}
.container .second {
    order: 2;
}
.container .third {
    order: 1;
}

代码语言：javascript复制

<div class="container">
    <div class="first">
        这是第一个元素
    </div>
    <div class="second">
        这是第二个元素
    </div>
    <div class="third">
        这是第三个元素
    </div>
</div>

方式二

使用display属性将元素生成为表格与表格行的关系

值	描述
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>表体）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>表头）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>页脚）。

示例：

代码语言：javascript复制

.container {
    display:table;  
}
.container .first {
    display:table-footer-group;
}
.container .second {
    display:table-row-group;
}
.container .third {
    display:table-header-group;
}

代码语言：javascript复制

<div class="container">
    <div class="first">
        这是第一个元素
    </div>
    <div class="second">
        这是第二个元素
    </div>
    <div class="third">
        这是第三个元素
    </div>
</div>

flex header reverse row table

0 人点赞