React Native flex布局alignItems、alignContent、alignSelf的区别

来源:互联网 发布:ps做淘宝详情页 编辑:程序博客网 时间:2024/06/05 23:00

在用flex布局疯狂写界面的过程中,你可有看到了这几个属性不是到有什么区别,又或者你还没有见过这其中的某个属性而为某个布局设计绞尽脑汁,看这里

从我们最熟悉的alignItems说起吧

alignItems
alignItems和justifyContent配合使用,前者是侧轴布局,后者是主轴布局,但是主轴具体代表横轴还是纵轴取决于flexDirection的属性值

alignItems的几个属性和效果,如下图

这里写图片描述

alignContent

alignContent的布局效果和alignIems完全一致,只不过前者只对多行的item才有效果,而后者对单行、多行都有效

alignSelf

alignSelf区别于alignItems的是,前者是在item内部定义的,它的默认取值是auto,向上取父类alignItems的值,如果对alignSelf属性的值进行自定义则会覆盖父类的效果

原创粉丝点击