关于align-self的问题

关于align-self的问题

align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。

我可不可以简单的理解为,align-self是基于这个元素本身高度居中。

比如p{align-self:center} 就是根据这个p标签本身的高度居中。

而align-item是基于父元素的高度居中。

例如<div><p style="align-self:center"></p></div>这个p元素就是按照div高度居中的。

而align-item和align-self,父元素(也就是上面的div)都必须设置display:flex属性才可以使用。


除了这个问题,另一个问题如果看见了帮我也回答一下。。。地址如下:

http://class.imooc.com/course/qadetail/179129


辛苦老师了。

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕糖 2019-12-19 09:43:09

同学你好,关于你的问题,回答如下:

1、align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式

2、align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式

3、两者的区别就是align-items是给所有的设置的(设置给父级,应用与所有的子元素),而align-self是单独设置给子元素的,应用与单独设置这个。且可以替换父级的align-items属性的属性值。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

好帮手慕糖 2019-12-18 18:38:18

同学你好,关于你的问题,回答如下:

1、align-self属性的属性值设置为center才是居中。

2、align-item和align-self两个都是基于父元素的高度居中的。

3、是的,align-item和align-self,父元素(也就是上面的div)都必须设置display:flex属性才可以使用。

关于同学的另一个问题,也会尽快帮助查看的哦。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 夜魇丶 #1
    感谢回答。另外align-item:center和align-self:center两个都是基于父元素的高度居中的,那他们有什么区别…
    2019-12-18 20:30:30
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师