FlexBox布局
属性1:flexDirection
row:按行进行排列
column:按列进行排列
属性2:justifyContent-在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。
flex-start:伸缩项目与父容器左端靠齐。
flex-end:与父容器右端靠齐。
center:水平居中。
space-between:第一个子组件位于父容器左端,最后一个子组件位于父容器最右端。然后平均分配在父容器水平方向上。
space-around:所有子组件平均分配在父容器的水平方向上,左右都有留隙。
属性3:alignItems -决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式
flex-start:与父组件的顶部对齐
flex-end:与父组件的底部对齐
center:处于父容器的中间位置
stretch:竖直上填充整个容器
属性4:alignSelf-设置子控件自身在父控件的对齐方式
auto:按照自身设置的宽高来显示,如果没设置,效果跟streth一样。
flex-start:与父容器顶部对齐。
flex-end:与父容器底部对齐。
center:位于垂直位置。
streth:垂直拉伸。
属性4: flex-设置伸缩项目的伸缩样式
如果在同一个父控件中,没设置宽度的几个控件按行排列,设置flex为1,2,4
flex为2的组件宽度为flex为1宽度的两倍,flex为4组件宽度则为flex为1的组件宽度的4倍。
解释:justifyContent指顺着指定的主轴进行排列--可以理解为如果指定主轴(即derection)为row,即为子控件在X轴上面一个一个依次排列,并且在X轴上面的排列方式为指定的方式。
例:指定direction为row,jsutifyContent为center,alignItems为center。我理解的是把3个控件放好,放好后看作一个整体,放在主轴的中心(center),次轴的中心(center)
例:指定direction为row,jsutifyContent为flex-start,alignItems为center。我理解的是把3个控件放好,放好后看作一个整体,放在主轴的左边(flex-start),次轴的中心(center)
网友评论