【移动端网页布局】flex 弹性布局子项目属性 ③ ( order 子项目属性 - 设置子项目元素排列顺序 | 代码示例 )

韩曙亮

发布于 2023-10-11 16:40:44

5140

发布于 2023-10-11 16:40:44

文章被收录于专栏：韩曙亮的移动开发专栏

一、order 子项目属性 - 设置子项目元素排列顺序

order 属性 : 控制 flex 子项目的排列顺序 ; 主要是修改前后顺序 , 原来是 1 - 2 - 3 排列顺序 , 可以将其改为 2 - 1 - 3 排列顺序 ;

默认值 : order 子项目属性的默认值为 0 ;
属性值是数值 , 数值越小 , 排列越靠前 ;

如果想要将某个元素提到最前面 , 所有元素的默认值为 0 , 为元素赋值一个负数 , 即可将元素提到最前面 ;

同理 , 如果想要将某个元素放到最后面 , 将元素的 order 属性设置一个正数 , 其它元素保持默认值 0 不变 , 则该元素就会自动放到末尾 ;

二、代码示例 - 设置子项目元素排列顺序

下面的代码中 , 为 flex 容器中的第二个子元素设置 order 属性为 -1 , 其它元素默认都是 0 , 该元素就会被提到最前方 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 布局宽度 80% */
            width: 80%;
            /* 布局高度 500 像素 */
            height: 200px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
        
        div span:nth-child(2) {
            /* 将其 顺序设置为 -1 , 其它所有的元素的 order 属性都是 默认值 0 
               该属性会排在最前面 */
            order: -1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

展示效果 :