1、有固定的宽高，则显示固定的宽高，这个宽高不是像素，而是代表独立的像素密度
2、flex：让组件根据可用空间动态的收缩和扩展
通常情况下我们可以使用flex：1，告诉某个组件来填充剩余的所有的空间，如果是多个组件的话，则是所有的这些组件去平分父容器中的剩余的所有空间。。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大。
2、Flexbox
一个组件可以使用Flexbox指定其子组件或元素之间的布局。Flexbox旨在为不同的屏幕上提供一致的布局。
通常情况下，我们结合使用flexDirection、alignItems和 justifyContent三个样式属性就已经能够实现我们所需的布局。
注意：Flexbox在React Native的工作原理和使用方式与css在web上的方式基本一样，当然也有一些例外：比如flexDirection的默认值是column而不是row，alignItems的默认值是stretch而不是flex-start，以及flex只能指定一个数字值。
3、Flex Direction
向一个组件的样式中添加Flex Direction可以决定一个布局的主轴。子元素应该沿着水平方向(row)排列，还是沿着竖直方向(column)排列呢？默认值是竖直(column)方向。
4、Justify Content
向组件的样式中添加Justify Content可以决定其子元素沿着主轴的排列方式。子元素应该分布在主轴的开始端，还是中间，最后，还是均匀分布？可用的选项有：flex-start、center、flex-end、space-around以及space-between。
- flex-start：弹性盒子元素将与行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
- flex-end：弹性盒子元素将与行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
- center：弹性盒子元素将与行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
- space-between：弹性盒子元素会均匀分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于’flex-start’。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
- space-around：弹性盒子元素会均匀分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于’center’。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
5、Align Items
向组件的样式（style）中添加alignItems可以决定其子元素沿着次轴（就是与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的开始端还是中间，还是末端，亦或是拉伸来填补呢？可用选项有：flex-start、center、flex-end以及stretch。
- flex-start：弹性盒子元素的次轴起始位置的边界紧靠该行的次轴起始边界。
- flex-end：弹性盒子元素的次轴起始位置的边界紧靠住该行的次轴结束边界。
- center：弹性盒子元素在该行的次轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- stretch：如果指定次轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。在下面的例子中：只有将子元素样式中的width: 50去掉之后，alignItems: ‘stretch’才能生效。
6、flex-wrap
默认情况下，item排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式，可能的值nowrap(默认)|wrap|wrap-reverse
nowrap：自动缩小项目，不换行
wrap：换行，且第一行在上方
wrap-reverse：换行，第一行在下面
7、align-self
align-self会覆盖父级设置的alignItem属性在次轴上的对齐方式，它有六个可能的值。默认值为auto。
auto：和父元素align-self的值一致
flex-start：顶端对齐
flex-end：底部对齐
center：竖直方向上居中对齐
baseline：item第一行文字的底部对齐
stretch：当item未设置高度时，item将和容器等高对齐