H5布局——弹性盒(flex)

H5布局——弹性盒(flex)

1.弹性盒：Css3的一种新的布局方式，

1.改变他所有子一级元素的排列方式(除了子一级的后代元素除外)
2.在你给一个元素设置display :flex 的时候
  =>弹性父级:设置了display :flex 的元素
  =>弹性子级:其所有的子级元素
3.在开启弹性布局以后
   a.会得到一条默认的主轴
      =>默认方向为水平方向,按照x轴正方向
   b.会得到一条默认侧轴
      =>永远垂直主轴排列
4.开启弹性布局后对子元素的影响
   a.所有子元素默认全部按照主轴方向排列
       =>默认从左向右排列
    b.所有子元素默认在主轴方向上没有长度
       =>当主轴为水平的时候,子元素没有宽度
       =>当主轴为垂直的时候,子元素没有高度
    c.所有子元素默认在侧轴上填满长度
       =>水平,子元素的高度就是侧轴的长度
       =>垂直,子元素的高度也是侧轴的长度
    d.所有子元素再主轴默认得排列方式是
        => 从主轴开始方向向主轴结束方向排列
    e.所有子元素默认再侧轴开始方向堆叠
        => 默认都是放在侧轴开始位置
    f.所有子元素永不换行
        => 当一行排列不下得时候, 会自动均匀挤压所有子元素
        => 直到子元素不能再继续被挤压(里面由内容), 那么就直接溢出盒子
       
   
   

2.弹性父级里的属性与属性值

1.flex-direction 表示主轴方向
  =>row:表示水平方向排列 从左往右(默认值)
  可选值:
  =>row-reverse:表示水平方向排列 从右往左