web小白的成长历程

92 阅读1分钟

移动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; 垂直居中 (最常用)