移动web第三天
1、PC端网页和移动端网页的有什么不同:
- PC屏幕大,网页固定版心
- 手机屏幕小, 网页宽度多数为100%
2、Flex布局/弹性布局:
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
3、 修改主轴对齐方式属性: justify-content:
flex-start
默认值, 起点开始依次排列
flex-end
终点开始依次排列
center
沿主轴居中排列
space-around
弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between
弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly
弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
4、侧轴对齐方式
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器
align-items: center; 垂直居中 (最常用)