【移动端网页布局】flex 弹性布局子项目属性 ② ( align-self 子项目属性 - 设置指定子项目元素侧轴排列方式 | 代码示例 )

韩曙亮

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

2140

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

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

一、align-self 子项目属性 - 设置指定子项目元素侧轴排列方式

align-self 子项目属性用于控制子项目在侧轴上的排列方式 ;

align-self 子项目属性样式 , 可以设置某个子项目元素与其它子项目排列方式不同 ;

align-self 取值 :

align-self 样式可以覆盖父容器中 align-items 的设置 ;
align-self 默认值为 auto 值 , 默认继承父容器 align-items 属性样式 ;
如果没有父容器 , 则默认的属性值是 stretch 侧轴元素拉伸 ;

align-items 样式设置侧轴单行子元素排列方式

flex-start , 默认值 , 默认情况下主轴是从左到右 , 侧轴从上到下 , 此处设置默认值 , 就是侧轴从上到下的设置 ;
flex-end , 侧轴的元素从下到上 ;
center , 侧轴元素垂直居中 ;
stretch , 侧轴元素拉伸 ;

二、代码示例 - 设置指定子项目的侧轴排列方式

下面的代码中 , 在 flex 弹性布局中 , 侧轴排列方式默认为 flex-start 样式 , 使用

        div span:nth-child(2) {
            /* 将 2 号子元素设置为 下对齐 */
            align-self: flex-end;
        }

样式 , 将 div 下的第 2 个 span 的侧轴排列方式设置成 align-self: flex-end; 样式 ;

代码示例 :

<!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) {
            /* 将 2 号子元素设置为 下对齐 */
            align-self: flex-end;
        }
    </style>
</head>

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

</html>

显示效果 :