赞
踩
分析页面的布局:
从上到下,线性布局,column容器:按列排从上到下,Row容器:按行排从左到右。
主轴与交叉轴,整个容器基本围绕这两个轴展开,而他们之间的间距Space
对齐方式:justifyContent:设置子元素在主轴方向上的对其格式,参数FlexAlign枚举
alignItems:设置子元素在交叉轴方向的对其格式,Row容器使用VerticalAlign枚举,Column容器使用HorizontaAlign枚举
实例:
justifyContent(FlexAlign.Center)上下居中
alignItems(HorzontalAlign.Center) 左右居中
主轴:
Column容器:
类似于弹性布局:
FlexAlign.start:沿着主轴的开始方向
FlexAlign.Center:沿着主轴的中部方向
FlexAlign.End:沿着主轴的末尾方向
FlexAlign.SpaceBetween:沿着主轴的方向将除模块元素外的所有空间平均分配到模块元素之间
FlexAlign.SpaceAround:沿着主轴的方向将模块等距离分割,且到顶部与底部距离为模块间距离的一半
FlexAlign.SpaceEvenly:沿着主轴的方向将空间从上到下平均分配,包括到顶部与底部的距离。
Row容器:
类比上部分,
交叉轴:
交叉轴,一般均为居中对齐,故非特殊情况不用修改。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。