React Native flexBox布局小结
?粗略的总结了一下ReactNative中的flexBox布局样式风格,有些图片是在网上找的,但可以看明白的。 1.flexDirection:决定布局主轴方向,该属性决定主轴的方向(即项目的排列方向)。 row-reverse:主轴为水平方向,起点在右端。 column(默认值):主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。 ? 2.justifyContent:决定其子元素沿主轴的排列方式; (1)flex-start(默认值):伸缩项目向一行的起始位置靠齐。 (2) center: 伸缩项目向一行的中间位置靠齐。 (3) flex-end: 伸缩项目向一行的结束位置靠齐。 (4) space-around: 伸缩项目会平均地分布在行里,两端保留一半的空间。 ? (5) space-between: 两端对齐,项目之间的间隔都相等。 ? (6) space-evenly:项目之间和两端之间都是等间距分布 ?
定义项目在交叉轴上如何对齐,可以把其想像成侧轴(垂直于主轴)的“对齐方式”。 flex-start:交叉轴的起点对齐。 flex-end:交叉轴的终点对齐 。 center:交叉轴的中点对齐。 baseline:项目的第一行文字的基线对齐。 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。 这里不一一试了,如下图(从网上弄下来的): 4.flexWrap:默认情况下,容器中的Item元素都排列在一条轴线上,flex-wrap属性定义了如果在一条轴线上排列不下所有的Item元素,可以进行换行排列
?(1)nowrap(默认值):不换行
(2)wrap:换行,第一行在上方 ? (3)wrap-reverse:换行,第一行在下方(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |