flex布局子项常见属性align-self、order

最新推荐文章于 2024-02-12 14:10:28 发布

_XinXinM_

最新推荐文章于 2024-02-12 14:10:28 发布

阅读量836

点赞数

本文链接：https://blog.csdn.net/binbinhxx/article/details/111949777

版权

1.align-self控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继续继承父元素align-items属性，如果没有父元素，则等同于strech。

div span:nth-child(3){
            align-self:flex-end;
        }

让第三个盒子下来：

 align-self:flex-end;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width:80%;
            height:300px;
            background-color: pink;
            /* 让三个子孩子同时在侧轴上移动 */
            /* align-self:flex-end; */
        }
        
        div span{
            width:150px;
            height:100px;
            background-color:aqua;
            margin-right: 5px;
        }
        div span:nth-child(3){
            align-self:flex-end;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>m

在这里插入图片描述
order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0；
注意：和z-index不一样。

/* 默认是0 -1比0小所以在前面 */
            order:-1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width:80%;
            height:300px;
            background-color: pink;
            /* 让三个子孩子同时在侧轴上移动 */
            /* align-self:flex-end; */
        }
        
        div span{
            width:150px;
            height:100px;
            background-color:aqua;
            margin-right: 5px;
        }
        div span:nth-child(2){
            /* 默认是0 -1比0小所以在前面 */
            order:-1;
            font-size: 80px;
        }
        div span:nth-child(3){
            align-self:flex-end;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

在这里插入图片描述

_XinXinM_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex布局子项常见属性align-self、order

1.align-self控制子项自己在侧轴上的排列方式align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继续继承父元素align-items属性，如果没有父元素，则等同于strech。div span:nth-child(3){ align-self:flex-end; }让第三个盒子下来： align-self:flex-end;<!DOCTYPE html><
复制链接

扫一扫