flex布局单元素侧轴从上至下单元素设置对齐

侧轴从上至下单元素设置方式

单元素是指父元素中的其中一个亲儿子

单个盒子对齐语法:align-self:(方向);方式

为了方便大家理解请参考坐标位置图 

 单元素设置盒子对齐方式  盒子移动是按照自己的起点默认位置进行从上到中间至下移动

接下来我们需要实现以下效果

 实现盒子如此摆放的情况前提是盒子宽高1:1并且盒子是正方形  如果宽高不为一比一盒子不是正方形

效果就会是这样

操作步骤创建结构摆盒子 参考图片 

结构展示图

 

接下来我们需要第二个盒子移动到中间位置  ！！！我们需要的第二个盒子去运动 单元素移动

接下来我们要用上align-self：（方向）；

 /* 结构伪类选择器 选中.box盒子中的第二个span标签 进行侧轴从上至下居中 */
.box span:nth-child(2){
    /* 单元素侧轴位置居中 y轴从上至下 居中显示*/
    align-self: center;
}

接下来我们需要第三个盒子 去到最底部显示我们需要选中它

 /* 结构伪类选择器 选中.box盒子中的第三个span标签 侧轴终点显示 */
.box span:nth-child(3){

    align-self: flex-end;
}  

 

 这个时候有细心的小伙伴会有疑问我在页面中选中了第二个第三个盒子去进行移动 那么第一个盒子移动起点位置的语法是是什么?

这是我们的页面初始效果

 我们需要移动的是第二个和第三个盒子,有居中,和终点显示方式当然也有起点位置排列方式,起点位置从上开始排列语法格式:align-self:flex-start;请大家务必记住align-self这是添加在子元素自身上 可千万不能添加在父元素上,因为我们只需要移动单个元素的位置,可不是移动页面中所有子元素的位置