flex弹性布局

flex弹性布局与传统布局的区别

• 传统布局
  优点：兼容性好
  缺点：繁琐
• flex弹性布局
  优点： 简单
  缺点：兼容性不好

设置属性的时候主要分为父元素设置和对子元素设置两种方式

父项

1 flex-direction设置主轴方向

   row从左向右
   row-reverse从右向左
   column从上向下
   column-reverse从下向上

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

  flex-start;默认值从左往右
  flex-start;默认值从右往左
  space-around平分父元素的空间
  space-between先放到两边，再平分剩余空间

3 flew-wrap 不能自动换行一定要加flex-wrap

wrap换行
nowrap不换行 默认不换行

4 align-items 设置侧轴上的子元素排列方式(单行)

flex-start 上对齐
flex-end 下对齐
center 居中
stretch 设置子项元素高度平分父元素高度（当子元素设置高度的时候没有效果）

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

flex-start 从头部开始
flex-end 从尾部开始
center 从中间开始
space-between 先设置两头，然后将剩余位置平分显示
space-around 平分剩余空间
stretch 平分父元素的高度，当设置高度的时候，没有效果

6 复合属性flex-flow 同时设置flex-direction 和 flex-wrap

子项

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

flex-start 从头部开始
flex-end 从尾部开始
center 从中间开始
stretch 拉升
注意：align-self的优先级比align-items,align-content高子项还可以作为父项设置居中

2 order 设置子项之间的排列顺序

默认值是0 
谁的order值越小，谁越靠前

3 flex 设置子项宽度占父元素宽度的比例 flex:1

 注意： 
      当子项指定了width时无效
      每个子项均分父元素的宽度

小结

          1 父项添加了display:flex不会对布局有影响
          2 默认宽度由内容撑开，高度和父项一样
          3 子项添加浮动没有效果
          4 加定位有效果，一般不用
          5 子项可以直接添加宽度和高度
          6 子项也可以作为父项