关于Flex布局在开发过程中使用的总结

Flex（弹性布局） 最近工作重心全部转移到了APP内H5开发，关于在H5开发过程中有很多的东西需要去总结，比如和原生的交互，字体布局对rem的使用，布局过程中大量支持的Flex布局的运用。在之前的开发过程中，大多数的使用都是在PC网站上由于要兼容IE等多浏览器的版本，不能用上Flex布局！在App中我们采用了统一的webkit版本，这样我们就能放心的使用Flex布局了。

下面记录下我在flex布局使用最多的几个属性，只用于记录，不用于探讨

Flex能够给任何一个容器（不管是块级还是行内都OK）

开发过程中常用的属性：

• display:flex : 给容器添加flex布局
• justify-content ：用于左右对齐方式
  1. flex-start ：默认值。项目（子元素）位于容器的开头。
  2. flex-end： 项目（子元素）位于容器的结尾。
  3. center：项目（子元素）位于容器的中心。
  4. space-between: 项目（子元素）位于各行之间留有空白的容器内。各个项目之间的空白距离相等。首尾<font color=red size=4>不填充</font>空白
  5. space-around：项目（子元素）位于各行之间留有空白的容器内。各个项目之间的空白距离相等。首尾<font color=red size=4>填充</font>空白空白
• align-items :用于上下对齐方式
  1. stretch: 默认值。项目被拉伸以适应容器。
  2. center: 项目位于容器的中心。
  3. flex-start: 项目位于容器的开头。
  4. flex-end： 项目位于容器的结尾。
  5. baseline：项目位于容器的基线上。
• flex-flow ：flex-direction flex-wrap 的简写flex-direction定义弹性盒子元素的排列方向。flex-wrap 控制flex容器是单行或者多行。
  1. row wrap: 以行进行展示并且自动换行
• flex-direction ：
  1. row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
  2. row-reverse：对齐方式与row相反。
  3. column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
  4. column-reverse：对齐方式与column相反。
• flex-wrap：
  1. nowrap : flex容器为单行。该情况下flex子项可能会溢出容器
  2. wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
  3. wrap-reverse：反转 wrap 排列。

以上就是在APP H5过程中使用Flex布局的时候使用到的一些属性。

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧