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*/
}
复制代码
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。