• 定义flex：

  {display : flex ;}
  

• 排列

  • 行排列

  元素1 元素2 元素3
  flex-direction : row

  元素3 元素2 元素1
  flex-direction : row-reverse

  • 列排列

  元素1
  元素2
  元素3
  flex-direction : column

  元素3
  元素2
  元素1
  flex-direction : column-reverse

• 元素宽度：
  flex-basis : 50px ;

  • 延长

  flex-grow : 6 ;
  在子元素的宽度在原先的宽度x基础上，加上父元素剩余宽度空间(sum)除6后的宽度
  Length = x + sum/6

  • 缩短

  flex-shrink : 6 ;
  在子元素的宽度在原先的宽度x基础上，减去父元素剩余宽度空间(sum)除6后的宽度
  Length = x - sum/6

  若一个父元素里有多个子元素分享同一行的宽度，若统一调度子元素则子元素平分父元素宽度，若需要呈现子元素之间的一定比例，则可以将子元素的basis置为0，grow置为1，再将特定子元素如:

   .item : nth-child (1) { flex-grow : 100}
   <!-- 即 将第一个子元素置为其他子元素的100倍 
      父元素长度= 100y + 剩余子元素的个数*1*y  
      (因为子元素自身长度置为0了,默认的子元素长度为y) -->
  

  缩短同理:

  item{ flex-shrink : 2 ;} 
  .item : nth-child (1) { flex-grow :1} 
  <!-- 父元素长度=（剩余子元素长度-2y）+ （第一个子元素长度-1y）  -->
  

  • 简写 ： flex : flex-grow flex-shrink flex-basis ;
    例如 flex : 0 1 auto ;

• 常用属性

                   |  交叉轴
                   |
                   |
   ----------------|-------------------主轴
                   |
                   |
                   |

align -items : stretch // align -items控制元素在交叉轴上的对齐方式 ，stretch指把所有元素都统一拉成最高的元素的行高
align -items : flex // 让所有元素在交叉轴最顶部横向排列对齐
align -items : flex-end //让所有元素在交叉轴最底部横向排列对齐
align -items : flex-center //让所有元素在交叉轴中部横向排列对齐
align -items : baseline //让所有元素按文字的底部横向排列对齐
align-self : flex-start;//让单个元素自身在交叉轴最顶部
align-self : flex-end;//让单个元素自身在交叉轴最底部
align-self : center;//让单个元素自身在交叉轴居中

justify-content : flex-start; //在主轴的最前边横向排列对齐
justify-content : flex-end; //在主轴的最后边横向排列对齐
justify-content : flex-center; //在主轴的居中横向排列对齐
justify-content : space-between; //在主轴的前后都挨着，元素之间在距离都相等
justify-content : space-around; //在主轴元素中间间隔是最两边间隔的两倍
justify-content : space-evenly; //在主轴元素的间隔都相等

flex-wrap : nowrap ; //元素横向排列，哪怕超出容器长度范围也不换行
flex-wrap : wrap ; //元素横向排列，容器剩余长度不够的话就换行
flex-wrap : wrap-reverse ; //元素从容器底部开始横向排列，长度不够就向上换行

align-content : normal ; //元素正常排列不对齐
align-content : flex-start ; //元素与同行元素最高的元素同高并在交叉轴顶部对齐
align-content : flex-end ; //元素与同行元素最高的元素同高并在交叉轴底部对齐
align-content : space-around ; //元素与同行元素最高的元素同高,元素按纵向排列，中间的间隔是两边间隔的两倍
align-content : space-between ; //元素与同行元素最高的元素同高，按纵向排列，中间间隔相等，两边没有间隔
align-content : space-evenly ; //元素与同行元素最高的元素同高，按纵向排列，中间和两边间隔相等

order : n ; //元素在容器中的排列顺序，并不改变序列号