flexbox布局是w3c继css之后的新的布局方式，可以简便、完整、响应式地实现各种页面布局。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
如果你是Android开发者(跟FlowLayout很像)或是前端开发者，相信你会很轻松的操纵这种布局方式。
首先，我们先来认识一下flexbox布局的几个重要属性
- flexDirection
定义子元素是水平（row）还是竖直（column）排列，默认值为column。
Paste_Image.png
flexDirection: 'row', 使得子元素水平排列
- justifyContent
定义子元素在主轴（x轴）的对齐方式
- flex-start
- flex-end
- center
- space-around -> 两端对齐，项目之间的间隔相等
- space-between
下面来看下 space-between 的布局方式
Paste_Image.png
justifyContent: 'space-around',
- alignItems
定义了y轴上子元素的布局方式
- flex-start
- flex-end
- center
- stretch-> 拉伸至整个容器
- flexWrap
flexWrap属性定义一条轴线排不下时是否折行。它有两个值，分别是wrap和nowrap，分别代表支持换行和不支持换行，默认是nowrap。
针对于子元素本身的布局方式
flex
是否让当前的视图尽量占用更大的空间，这个属性可能使项目属性justifyContent失效。有两个值0和1，0代表否，1代表是，默认为0。alignSelf
允许单个项目在交叉轴方向上与其他项目不一样的对齐方式，可覆盖alignItems属性，它的值有五个，除了auto，其他都与alignItem属性完全一致，默认为auto。
不过最后要说的是，这种东西 还是靠自己去玩，才能玩出心得出来。还是一句话：无他 唯手熟尔！！！
IMG_0575.JPG
说句题外话，我写文章，她就一直在我旁边看着
