display-flex(开启弹性布局)

display-flex

父类属性(box)

flex-direction : 更改主轴的方向

row               /*默认值*/
row-reverse       /*主轴方向上从右(start)到左(end)*/
column             /*主轴从上(star)到下(end)*/
column-reverse  /*主轴从下(start)到上(end)*/

justify-content: 更改items在主轴的布局

flex-start /*主轴start依次分布*/
center /*主轴居中*/
flex-end /*主轴end依次分布*/

align-items: 更改items在交叉轴的布局

flex-start /*交叉轴start依次分布*/
center /*交叉轴居中*/
flex-end /*交叉轴end依次分布*/

当一行的时候center

flex-wrap : 当box的宽度不够容纳items,默认情况不换行

flex-wrap:wrap /*换行*/

flex-flow: 是(flex-direction || flex-wrap)的混合

flex-flow:row-reverse wrap /*主轴从右到左,并且换行*/

align-content: 这个属性和align-items 差不多,但是前者是一行

flex-start; /*交叉轴start开始*/
center;    /*交叉轴上居中*/
flex-end;  /*交叉后end*/
space-around; /*最左、最右item贴合左侧或右侧边框，item与item之间间距相等。*/
space-between;/*每个item 左右方向的margin相等。两个item中间的间距会比较大*/
space-evenly /*每个item均等分布*/

当多行的时候 center

子类属性(items)

order-by : itme的排序

item1 order-by:3
item2 order-by:2
item3 order-by:1

上面顺序:从小到大排序依次是 item3,item2,item1

align-self: (用来覆盖box元素的align-item的对齐方式)

.box{
    display:flex;
    aligh-items:center;
}
.item8{
    align-self:flex-end
}

flex-grow: 当box元素有剩余的空间则对剩下的空间进行分配

.box{
    width:100px
}
.items{
    width:20px
    flex-grow:1; /*有四个item,每个20px*4=80px,box元素剩下20px,则对20px/4=5px,分配给每个item5px*/
}

flex-basis: 设置主轴上元素的大小