flexBox布局

常用的属性:

属性1. flexDirection 该属性取决于主轴的方向

row:主轴为水平方向起点在最左侧

row-reverse:主轴为水平方向起点在最右边

column(默认):主轴为竖直方向起点在最上方

column-reverse:主轴在竖直方向起点在最下方

图1


要改变其布局方式首先要确定其主轴方向在样式里边进行修改如下:

图2

注:确定了主view的主轴方向子view的方向也随之确定如要改变只需改变子view的样式即可

属性2.justifyContent:决定主轴的对齐方式

flex-start:伸缩项目向一行的开始位置对齐


图3


flex-end:伸缩项目向一行的结束位置对齐


图4

center:伸缩项目向中间对齐

图5

space-between:两端对齐项目中间的间距相等

图6

space-around:平均分配两端保留一半的空间

图7

属性3:设置侧轴的对齐方式alignItems

flex-start:顶部对齐。   flex-end:底部对齐。 center:居中。  stretch:(默认)拉伸和父视图的高度一样

属性4:flexWrap 默认情况下的项目都在一条直线上超出了父视图不会进行换行的操作

wrap:换行                nowrap:不换行(默认)


元素属性

1.flex:设置父视图与本身控件的百分比

2.alignSelf:设置其中某个控件的侧轴对齐可以覆盖alignItems

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容