@qidiandasheng 2020-10-10T06:39:47.000000Z 字数 1716 阅读 1035

ReactNative之Flex布局(😄)

ReactNative

介绍

Flex布局是CSS的一种新的布局方式，由W3C在2009年提出。ReactNative中就使用了FlexBox作为布局方式。

其使用基本跟Web上的CSS FlexBox差不多。不同的是ReactNative中的FlexBox相当于一个阉割版，还有一些属性及值的写法上有些许不同。

标准的Web上面的FlexBox使用语法等可参考阮一峰的文章Flex 布局教程：语法篇。

ReactNative里的FlexBox属性可以查看Layout with Flexbox。ReactNative的其他CSS属性参看Layout Props 。

以下左边的就是ReactNative里的FlexBox属性，右边的就是标准的FlexBox的属性。这张表列出的就是ReactNative中用到的对应FlexBox，还有一些FlexBox的属性ReactNative是没用到的。但这几个基本能解决大部分的布局需求了。

上半部分为容器的属性，下半部分为容器里项目的属性。

属性名	值	属性名	值
flexDirection	row , column	flex-direction	row , row-reverse , column , column-reverse
flexWrap	wrap , nowrap	flex-wrap	nowrap , wrap , wrap-reverse
justifyContent	flex-start , flex-end , center , space-between , space-around	justify-content	flex-start , flex-end , center , space-between , space-around
alignItems	flex-start , flex-end , center , stretch , baseline	align-items	flex-start , flex-end , center , stretch , baseline

alignSelf	auto, flex-start, flex-end, center, stretch, baseline	align-self	auto, flex-start, flex-end, center, stretch, baseline
flexGrow	number 默认0	flex-grow	number 默认0
flexShrink	number 默认1	flex-shrink	number 默认1
flexBasis	length \| auto 默认auto	flex-basis	length \| auto 默认auto
flex	-1, 0, 1, 2...	flex	flex-grow flex-shrink flex-basis三个属性的值的排列组合

flexDirection决定布局的主轴。row表示水平轴为主轴，则竖直轴为次轴。column表示竖直轴为主轴，水平轴为次轴。ReactNative中默认为column，而Web中默认为row。

justifyContent和ailgnItmes都是表示对齐方式，justifyContent表示主轴上的对齐方式，即上面flexDirection确定的主轴。ailgnItmes表示次轴上的对齐方式。

以下为对应的排列效果图，其中alignItems需要配合justifyContent一起使用，即需要先确定主轴的对齐方式，否则无效。

flexDirection: 'row',
justifyContent: 'flex-start'

flexDirection: 'column',
justifyContent: 'flex-start'

flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-start',

flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-start',