RN 布局篇 FlexBox

RN 布局篇 FlexBox

之前整理过css中的的弹性布局，今天想总结下RN在使用弹性布局时的区别

react-native中有四个父级容器属性，2个项目属性

容器属性：flexDirection、justifyContent、alignItems、flex-wrap
项目属性：flex、alignSelf

#容器属性1：flexDirection: column(默认值) | row | row-reverse | column-reverse

/* 决定主轴方向 */
// 主轴为水平方向，items水平布局
flexDirection: row; 
// 主轴为垂直方向，items垂直布局
flexDirection: column;

#容器属性2：justifyContent：flex-start(默认值) | flex-end | center | space-between | space-around

/* 决定在主轴方向项目的对齐方式,一般是在row方向应用 */
// 向一行的起始位置靠齐
justifyContent: flex-start;
// 向一行的结尾位置靠齐
justifyContent: flex-end;
// 向一行的中间位置靠齐
justifyContent: center;
// 向一行的两端靠齐，且项目之间的间距相等
justifyContent: space-between;
// 向一行的中间靠齐，且类比项目之间的marginLeft和marginRight的值一致
justifyContent: space-around;

#容器属性3：alignItems: flex-start (默认值) | flex-end | center | stretch

/* 决定在侧轴方向的对齐方式，一般针对在column方向应用 */
// 向一列的起始位置靠齐
alignItems: flex-start;
//向一列的结尾位置靠齐
alignItems: flex-end;
// 向一列的中间位置靠齐
alignItems: center;
// 占满整个列（项目未设置高度）
alignItems: stretch;

/* 决定在主轴方向项目是否换行 */

#容器属性4：flex-wrap: nowrap(默认值) | wrap

/* 决定在主轴方向项目是否换行,一般用在row方向 */

$项目属性1：flex: 1;

/* 定义剩余空间的比例 */

$项目属性2：alignSelf: auto(默认值) | flex-start | flex-end | center | stretch

/* 定义自身在容器中的对齐方式 */