新版弹性盒子

新版弹性盒子

1. 给容器设置的属性

容器里的项目变成横向排列.

容器没有高度的话,高度由项目撑开

项目没有高度的话,高度变成和容器一样高

项目没有宽度的话,宽度由内容撑开

（1）display: flex;

（2）display: inline-flex;

（3）flex-direction  

flex-direction: row;默认的值,主轴是水平方向,起始端在左侧

flex-direction: row-reverse; 主轴是水平方向,起始端在右侧

flex-direction: column; 主轴是垂直方向,起始端在顶部

flex-direction: column-reverse; 

主轴是垂直方向,起始端在底部

(4) justify-content  

当flex-direction: row;的时候

justify-content: flex-start;默认值

justify-content: flex-end;

justify-content: center;

justify-content:space-around;

justify-content:space-between;

(5) align-items  

当flex-direction: row;的时候

align-items: flex-start;默认值

align-items: flex-end;

align-items: center;

align-items: baseline;

（6） flex-wrap  

flex-wrap: wrap;换行

flex-wrap: wrap-reverse;反方向的换行,第一行最底部

（7） align-content 项目是多行的时候排列方式(可以取消行与行之间的距离)

align-content: flex-start;

align-content: flex-end;底部对齐

align-content:  center; 居中对齐

align-content: space-around;

两行之间的距离是第一行和顶部(最后一行和底部)的二倍

align-content: space-between;两端对齐

2. 给项目设置的属性

（1）flex 项目分配的份儿数

（2）order 项目排列的位置

（4）align-self 单独改变某个项目的排列方式

属性和align-items是一样的

（5）flex-shrink 项目缩小

默认值是:1

    容器宽度600px

    项目: 8个,每个是100px 项目的总宽度是800

    所以有200px超出容器,200px分配给8个项目

    八个项目的比例 2:1:1:1:1:1:1:1

    八个项目一共的权值:        2*200+1*200+1*200+1*200+1*200+1*200+1*200+1*200=1800

    第一个项目:

        (2*200/1800)*200=44.44

        100-44.44=55.56    

    第二个项目

        (1*200/1800)*200=22.22

        100-22.22=77.78

（6）flex-grow 项目放大

默认值是:0

容器是600

3个项目,每个项目是100,一共是300,所以剩余了300

给第二个项目设置flex-grow: 2; 第三个项目设置flex-grow: 1;

剩余的300倍分成了3份,第二个项目占2/3,第三个项目占1/3,

第二个项目分配到了200,第三个项目分配到了100

第二个项目200+本身的100=300

第三个项目100+本身的100=200