flex布局

传统布局来说：兼容性好，布局繁琐，
flex布局：布局简单，操作方便，但是pc端支持比较差，
建议：pc布局的话用传统布局，对于移动端或则pc端不考虑兼容性的话就用flex布局

当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

flex布局的原理
就是通过给父元素添加flex属性，来控制盒子的位置和排列方式

flex布局父项常见的属性

• flex-direction 设置主轴的方向
  
  

• justify-content: 设置主轴上子元素的排列方式

• 

• flex-wrap 设置子元素是否换行

• 如果传统布局中一行放不下的话会自动换行，但是flex中一行放不下的时候默认时是不换行

• 它会硬塞进去，缩小子盒子的大小
  

• align-content 设置侧轴上子元素的排列方式（多行）

• 要加上flex-wrap :wrap;才能用

• 
  

• align-items 设置侧轴上子元素的排列方式（单行）

• 
  

• flex-flow:复合属性，相当于同时设置了flex-direction和flex -wrap
  flex-flow:column wrap;

flex布局子项常见的属性

• flex子项目占的分数
  根据父元素剩余空间来分配的，如果你的所有子元素都不给宽度的话，那所有子元素都各占一份
  

• align-self 控制子项自己在侧轴的排列方式

• 向想自己控制自己的话就要，写在自己上

• order属性定义子项的排列顺序（前后顺序）
  数值越小，排列越靠前，默认为0
  注意和z-index不一样
  
  
  
  
  背景线性渐变
  背景渐变必须添加浏览器私有前缀webkit
  起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red , blue); 从左开始
background: -webkit-linear-gradient(left top, red , blue);从左上角到右下角