React Native 的 Flex 布局重点

样式

alignItems enum('flex-start', 'flex-end', 'center', 'stretch') [重点]

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')

borderBottomWidth 数值型

**borderLeftWidth **数值型

borderRightWidth 数值型

borderTopWidth 数值型

borderWidth 数值型

**bottom **数值型

**flex **数值型

**flexDirection **enum('row', 'column')

**flexWrap **enum('wrap', 'nowrap')

height 数值型

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')

**left **数值型

**margin **数值型

marginBottom 数值型

marginHorizontal 数值型

marginLeft 数值型

**marginRight **数值型

marginTop 数值型

**marginVertical **数值型

**padding **数值型

**paddingBottom **数值型

paddingHorizontal 数值型

paddingLeft 数值型

paddingRight 数值型

paddingTop 数值型

**paddingVertical **数值型

**position **enum('absolute', 'relative')

right 数值型

**top **数值型

**width **数值型

属性 含义
flex-direction 方向
flex-wrap 换行
flex-flow 上面两个的简写
justify-content 主轴方向对齐方式
align-items 侧轴对齐方式
align-content 多行/列内容对齐方式（用的较少）

align-self

align-self 属性规定灵活容器内被选中项目的对齐方式。
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

stretch 元素被拉伸以适应容器。

center 元素位于容器的中心。

flex-start 元素位于容器的开头。

flex-end 元素位于容器的结尾。

baseline 元素位于容器的基线上。

initial 设置该属性为它的默认值。

inherit 从父元素继承该属性。

最佳flex 布局文章推荐:

Reac-Native布局详细指南
http://www.devio.org/2016/08/01/Reac-Native布局详细指南/

布局练习demo
‎⁨Macintosh HD⁩ ▸ ⁨用户⁩ ▸ ⁨wanggang⁩ ▸ ⁨react02⁩MyApp2233