flex布局自学笔记
display-flex(开启弹性布局)
代码语言：javascript复制display-flex
复制代码父类属性(box)
flex-direction : 更改主轴的方向
代码语言：javascript复制row /*默认值*/
row-reverse /*主轴方向上从右(start)到左(end)*/
column /*主轴从上(star)到下(end)*/
column-reverse /*主轴从下(start)到上(end)*/
复制代码justify-content: 更改items在主轴的布局
代码语言：javascript复制flex-start /*主轴start依次分布*/
center /*主轴居中*/
flex-end /*主轴end依次分布*/
复制代码align-items: 更改items在交叉轴的布局
代码语言：javascript复制flex-start /*交叉轴start依次分布*/
center /*交叉轴居中*/
flex-end /*交叉轴end依次分布*/
复制代码当一行的时候center
flex-wrap : 当box的宽度不够容纳items,默认情况不换行
代码语言：javascript复制flex-wrap:wrap /*换行*/
复制代码flex-flow: 是(flex-direction || flex-wrap)的混合
代码语言：javascript复制flex-flow:row-reverse wrap /*主轴从右到左,并且换行*/
复制代码align-content: 这个属性和align-items 差不多,但是前者是一行
代码语言：javascript复制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的排序
代码语言：javascript复制item1 order-by:3
item2 order-by:2
item3 order-by:1
上面顺序:从小到大排序依次是 item3,item2,item1
复制代码align-self: (用来覆盖box元素的align-item的对齐方式)
代码语言：javascript复制.box{
display:flex;
aligh-items:center;
}
.item8{
align-self:flex-end
}
复制代码
flex-grow: 当box元素有剩余的空间则对剩下的空间进行分配
代码语言：javascript复制.box{
width:100px
}
.items{
width:20px
flex-grow:1; /*有四个item,每个20px*4=80px,box元素剩下20px,则对20px/4=5px,分配给每个item5px*/
}
复制代码
