flex

又名弹性布局，伸缩布局
使用方法：在父容器内使用display:flex；
自动对齐方法：justify-content : space-around;
均分的方法：子元素不写宽度，写 flex:1;（见子项属性）
任何一个容器都可以指定flex布局，注意：将父容器设置了flex属性后，子元素的float，clear，vertical-align将 失效

常见的给父亲项添加的属性：

• flex-direction:设置主轴方向
  在flex中，有主轴和侧轴，主轴默认水平，为row（从左到右），侧轴默认竖直
  属性：
  -- row（从左到右）
  -- row-reverse（从右到左）
  -- column（从上到下）
  -- column-reverse（从下到上）
• justfily-content:设置主轴上的子元素排列方式
  -- flex-start：默认值，从头部开始
  -- flex-end：从尾部开始
  -- center：在主轴居中对齐
  -- space-around：平分剩余空间
  -- space-between：先贴两边，再评分剩余空间（重要）
• flex-wrap：设置子元素是否换行
  默认是不换行的，装不下就缩小子元素的宽度，放到父元素里面
  -- nowrap：不换行
  -- wrap：换行
• align-content:设置侧轴上的子元素排列方式（多行）
  侧轴有多个行（列）时使用，前提：有出现换行的情况，在单行前提下，是没有效果的。
  相比单行，多了两个属性：
  -- space-around和space-between。
• align-items：设置侧轴上的子元素排列方式（单行）
  -- flex-strat：默认值，从上到下
  -- flex-end：从下到上
  -- center：挤在一起居中（垂直居中）
  -- stretch：拉伸。侧轴方向拉得和父亲一样（前提是没有赋初值）
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-warp
  eg：同时需要设置为需要换行和主轴换成纵向。

原本写法：
flex-direction:column;
flex-wrap:wrap;
新写法：
flex-flow：column wrap；

常见的子项属性

• flex属性
  flex：number；（该子项占的份数）。此份数不是指占总的当中的份数，而是指占剩余空间的份数。
• align-self
  控制子项自己在侧轴上的排列方式
• order
  定义项目的排列顺序
  按照order的值从小到大排列的，每个子元素的order值默认为0；

Tips：

• 想要让一个div被fixed定位，并且居中，且宽度不固定的算法：

position:fixed;
top:0;
left:50%;
width:100%;
min-width:320px;
max-width:540px;
-webkit-transform:translateX(-50%);//兼容老版本浏览器
transform:translateX(-50%);

• API
  API是给程序员提供的一种工具，以便能更轻松的 实现想要完成的功能。
• web API
  webAPI是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
  WebAPI链接