ReactNative入门教程-Flexbox布局

ReactNative在进行页面UI编写的时候采用的事Flexbox布局，俗称“弹性盒子”。
使用Flexbox可以在不同的屏幕尺寸上提供一致性的布局结构。
很多时候，使用其中的flexDirection、alignItems、justifyContent这个三个样式属性就能够满足大部分的布局需求。

Flex简介

Flex又叫弹性布局，会把当前组件看做一个容器，他的所有子组件都是他容器中的成员，通过Flex，就能迅速的布局容器中的成员。
使用场景：当想快速布局一个组件中所有子组件的时候，可以使用Flex布局

Flex主轴和侧轴

Flex中有两个主要的概念：主轴和侧轴
主轴与侧轴的关系：相互垂直的。
主轴：决定容器中子组件默认的布局方向：水平，垂直
侧轴：决定容器中子组件与主轴垂直的布局方向
比如主轴水平，那么子组件默认就是水平布局排布，侧轴就是控制子组件在垂直方向的布局

flexDirection

决定主轴的方向，水平或是垂直，共有4个值，默认是“column”,即垂直布局，

row（默认值）：主轴为水平方向，从左向右。依次排列
row-reverse：主轴为水平方向，从右向左依次排列
column：主轴为垂直方向，默认的排列方式，从上向下排列
column-reverse：主轴为垂直方向，从下向上排列

使用方式：

效果：默认值： ‘column’

• row
  
• row-reverse
  
• column-reverse
  

justifyContent

justifyContent决定了子元素在主轴方向的排列方式（此样式设置在父元素上）。例如若子元素本来是沿着竖直方向排列的（即主轴竖直，次轴水平），则alignItems决定了它们在竖直方向的排列方式。此样式和 CSS 中的justify-contents表现一致，默认值为 flex-start。

flex-start: 子组件向主轴起点对齐，如果主轴水平，从左开始，主轴垂直，从上开始。
flex-end 子组件向主轴终点对齐，如果主轴水平，从右开始，主轴垂直，从下开始。
center 居中显示，注意：并不是让某一个子组件居中，而是整体有居中效果
space-between 均匀分配,相邻元素间距离相同。每行第一个组件与行首对齐，每行最后一个组件与行尾对齐。
space-around 均匀分配,相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离将会是相邻元素之间距离的一半

使用效果： flex-end

• center
  
• space-between
  
• space-aroun
  

alignItems

alignItems决定了子元素在次轴方向的排列方式（此样式设置在父元素上）。例如若子元素本来是沿着竖直方向排列的（即主轴竖直，次轴水平），则alignItems决定了它们在水平方向的排列方式。此样式和 CSS 中的align-items表现一致，默认值为 stretch。

flex-start 子组件向侧轴起点对齐。
flex-end 子组件向侧轴终点对齐。
center 子组件在侧轴居中。
stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。

效果与justityContent类似只不过是在水平方向上。

当然如果想要更好的完成布局工作，还需要其他的样式组合。
可以参考官网的完整属性列表

有问题，欢迎大家在评论区留言，共同讨论。