必要元素：
指定一个盒子为伸缩盒子,等于开启弹性布局给该盒子设置 display:flex;
设置属性来调整此盒子的子元素的布局方式：如 flex-direction；
明确主侧轴及方向
可互换主侧轴，也可改变方向
各属性：
a) flex-direction：row（默认属性）
row：从左往右b) flex-direction：row-reverse
row-reverse从右向左排列c) flex-direction：column
竖直反向，从上往下d) flex-direction：column-reverse
1. 竖直方向，从下往上
a) justify-content：flex-start；
从主轴开始的方向对齐b) justify-content：flex-end
从主轴结束的方向对齐c) justify-content：center
居中对齐（水平/竖直）d) justify-content：space-around
平分父盒子空间e) justify-content：space-between
1. 两端对齐，中间平分
a) align-items：flex-start
从侧轴开始的方向对齐b) align-items：flex-end
从侧轴结束的方向对齐c) align-items：center
在侧轴方向上居中d) align-items：baseline
基线对齐，与flex-start等效e) align-items：stretch
拉伸，和父盒子高度一样 有高度不会被拉伸a) flex：number
b) 不设置就不参与平分
a) flex-wrap:wrap; 换行，控制伸缩盒子里面的元素
b) flex-wrap：nowrap； 默认不换行 会自动缩减宽度
a) align-content: flex-start
起始点对齐 各行向弹性盒容器的起始位置堆叠
b) align-content: flex-end;
终止点对齐 将结尾铺满 开头空着
c) align-content: center ;
居中对齐，各个盒子向弹性盒容器的中间位置堆叠／y轴中间
d) align-contnt: space-around;
四周环绕：各行在弹性盒容器中平均分布
e) align-content: space-between;
顶端和底部对齐，中间部分为空
f) align-content: stretch ;
拉伸 高度会自适应
align-self: stretch
flex-start ／ flex-end ／ center ／ stretch
侧轴起始点对齐／终止点对齐／居中对齐／拉伸
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论