flex布局自学笔记
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: 设置主轴上元素的大小
作者：我养了一只猫????
链接：https://juejin.cn/post/7026250242488352799