Flex（弹性布局） 最近工作重心全部转移到了APP内H5开发，关于在H5开发过程中有很多的东西需要去总结，比如和原生的交互，字体布局对rem的使用，布局过程中大量支持的Flex布局的运用。在之前的开发过程中，大多数的使用都是在PC网站上由于要兼容IE等多浏览器的版本，不能用上Flex布局！在App中我们采用了统一的webkit版本，这样我们就能放心的使用Flex布局了。
下面记录下我在flex布局使用最多的几个属性，只用于记录，不用于探讨
Flex能够给任何一个容器（不管是块级还是行内都OK）
开发过程中常用的属性：
- display:flex : 给容器添加flex布局
- justify-content ：用于左右对齐方式
- flex-start ：默认值。项目（子元素）位于容器的开头。
- flex-end： 项目（子元素）位于容器的结尾。
- center：项目（子元素）位于容器的中心。
- space-between: 项目（子元素）位于各行之间留有空白的容器内。各个项目之间的空白距离相等。首尾不填充空白
- space-around：项目（子元素）位于各行之间留有空白的容器内。各个项目之间的空白距离相等。首尾填充空白空白
- align-items :用于上下对齐方式
- stretch: 默认值。项目被拉伸以适应容器。
- center: 项目位于容器的中心。
- flex-start: 项目位于容器的开头。
- flex-end： 项目位于容器的结尾。
- baseline：项目位于容器的基线上。
- flex-flow ：flex-direction flex-wrap 的简写flex-direction定义弹性盒子元素的排列方向。flex-wrap 控制flex容器是单行或者多行。
- row wrap: 以行进行展示并且自动换行
- flex-direction ：
- row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
- row-reverse：对齐方式与row相反。
- column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
- column-reverse：对齐方式与column相反。
- flex-wrap：
- nowrap : flex容器为单行。该情况下flex子项可能会溢出容器
- wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse：反转 wrap 排列。
以上就是在APP H5过程中使用Flex布局的时候使用到的一些属性。
如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues