CSS元素位置的互换

十玖八柒

发布于 2022-08-01 09:57:53

2.4K0

发布于 2022-08-01 09:57:53

文章被收录于专栏：ahzoo.cn的博客分享

方法一

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

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

flex-direction:

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

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

<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>页脚）。

示例：

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-10-02，如有侵权请联系 cloudcommunity@tencent.com 删除

flex