文章目录
- 一、align-self 子项目属性 - 设置指定子项目元素侧轴排列方式
- 二、代码示例 - 设置指定子项目的侧轴排列方式
一、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>
显示效果 :
