flex布局自学笔记

display-flex
复制代码

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

flex-start /*主轴start依次分布*/
center /*主轴居中*/
flex-end /*主轴end依次分布*/
复制代码

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

flex-wrap:wrap /*换行*/
复制代码

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

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

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

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

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

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

复制代码