flex布局

1—justify-content 控制主轴方向的对齐方式

 
       justify-content: center;          主轴方向居中对齐
       justify-content: flex-start;      从主轴开始的方向堆叠
       justify-content: flex-end;        从主轴结束的地方堆叠
       justify-content: space-between;   子元素之间用空白分割，子元素和父元素边界没有空白
       justify-content: space-around;    让空白在子元素之间，空白宽度两边一致，其他地方一致
       justify-content: space-evenly;    将剩余空间用空白分割，空白的地方是等宽的。    

1
2
3
4
5
6
7
8
2—调整主轴的方向 flex-direction

        flex-direction: column                调整主轴方向为垂直方向
        flex-direction:row;                   默认的主轴方向为行。
        flex-direction:row-reverse;           调整主轴的方向从右到左开始。
        flex-direction: column-reverse;       调整主轴的方向从下到上。
1
2
3
4
3— 控制单行侧轴的方向 align-items

       align-items: flex-start;          从侧周开始地方对齐
       align-items:center;              从侧周的中间对齐
       align-items:flex-end;            从侧周结束的地方对齐
            
1
2
3
4
4— 控制弹性盒子中的元素是否换行 （默认不换行）

                  
       flex-wrap: wrap;           //子元素总和放不下一行的时候，自动换行
       flex-wrap:nowrap;          //默认不换行 自动压缩子元素的宽度

1
2
3
4
5—有多行的时候，用 align-items 调整侧轴的对齐方式是不管用的，所以用align-content

      align-content:flex-start;    从侧轴开始的方向堆叠
      align-content:flex-end;      从侧轴结束的方向堆叠
      align-content:center;      从侧轴的中间居中堆叠
      align-content:space-around;  让侧轴方向的盒子的剩余空间用空白分割。
      align-content:stretch;       让侧轴方向的盒子拉伸铺满父元素高度（子元素没设高度的情况下有用。设置高度的情况下，子盒子的高度不被拉伸）
      align-content:space-between; 让侧轴方向的盒子间用空白分割，两边贴父元素边。
      align-content:space-evenly;  让侧轴方向的盒子的剩余空间用空白均分。空白占比一致。

1
2
3
4
5
6
7
8
 6---设置子元素占父元素的比例，给子元素设置的。
       flex:1; 
       后面的数值表示，所加属性的这个子元素占父元素是剩余的几份， 
       已经有宽度的子元素提前分配不包在总份中。



 7--- order 设置子元素的排列前后顺序
       如果想让最后一个子元素最开始显示，可以添加这个 属性，数字越小，排在越前面。




 8--- align-self  如果某子元素想重新调整自己侧轴的对齐方式，
       就可以用这个，属性值同侧轴调整对齐方式属性值一样。