最近在学习Flax Layout,发现几张图能轻松记住Flax的布局问题,顺便 Mark 下吧:

flax_layout_header

1
2
3
4
5
6
7
8
//flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列,
//还是沿着竖直轴(column)方向排列呢?默认值是竖直轴(column)方向。

flaxDirection:
'row', //横向布局
'column', //纵向布局
'row-reverse', //横向反转(从又至左)
'column-reverse' //纵向反转(从下至上)

flax_layout_direction

1
2
3
4
5
6
7
8
9
//在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。
//子元素是应该靠近主轴的起始端还是末尾段分布呢?亦或应该均匀分布?

justifyContent: //Flax Direction 有这些属性可选
'flex-start', //从主轴起始位置开始布局(左 或 上)
'center', //主轴居中显示
'flex-end', //从主轴结束位置开始布局 (右 或 下)
'space-around‘ //平分主轴
'space-between' //间隙平分

flax_layout_justfy_content

1
2
3
4
5
6
7
8
//在组件的style中指定alignItems可以决定其子元素沿着次轴
//(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。
//子元素是应该靠近次轴的起始端还是末尾段分布呢?亦或应该均匀分布?
alignItem: //有这些属性
‘flex-start’,
'center',
'flex-end',
'stretch'

flax_layout_align_item

flax_layout_flax_wrap