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

2023-10-11 16:40:04 浏览数 (2)

一、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 样式 , 使用

代码语言：javascript复制
        div span:nth-child(2) {
            /* 将 2 号子元素设置为 下对齐 */
            align-self: flex-end;
        }

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

代码示例 :

代码语言：javascript复制
<!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>

显示效果 :

容器 flex self 布局 移动端

0 人点赞