css中的弹性布局与定位的使⽤
主轴⽅向
flex-direction:
justify-content
justify-content: flex-start 默认值
justify-content: flex-end; 右对齐
justify-content: center ; 居中
justify-content: space-between; 两端对齐
justify-content: space-around; 分散对齐
justify-content: space-evenly; 平均分配
分散对齐操作流程
step1： 获取剩余空间 容器的宽-所有项⽬的宽=剩余空间
step2： 剩余空间/项⽬个数=结果1
step3： 结果1/2=结果2
css固定定位step4：把结果2分配到每个项⽬左右
flex-wrap设置是否换⾏
主轴⽔平⽅向
条件所有元素宽度⼤于容器宽度
主轴垂直⽅向
条件所有元素⾼度⼤于容器⾼度
flex-wrap: nowrap: 默认值
flex-wrap: wrap; 换⾏
flex-direction: row-reverse;
缩写格式
flex-flow: column wrap;
交叉轴⽅向
交叉轴垂直⽅向
align-items: flex-start 默认值 顶部对齐
align-items: flex-start 底部对齐
align-items: center 居中
多恨轴⽅向
主轴⽔平⽅向
align-content: flex-start; 多⾏顶部
align-content: flex-end; 多⾏底部
align-content: center; 多⾏居中
align-content: space-around; 垂直⽅向分散对齐
align-content: space-between; 垂直⽅向两端对齐
align-content: space-evenly; 垂直⽅向平均对齐
position-ralative 相对定位 不脱离⽂档
position-absolate 绝对定位 脱离⽂档 相对于离它最近已经定位的⽗元素偏移
position-flxed 固定定位 脱离⽂档 相对于浏览器窗⼝左上⾓进⾏偏移
position-absolate position-ralative

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。