布局扩展

flex布局

一个可以在线练习flex布局的网站，flexFrog练习 http://flexboxfroggy.com/

• justify-content 主轴对齐方式

  • flex-start： 在主轴的正方向
  • flex-end: 在主轴的反方向
  • center： 在两边
  • space-between： 在项目之间
  • space-around： 在项目两边

• align-items 侧轴对齐方式

  • flex-start：在侧轴的正方向
  • flex-end： 在侧轴的反方向
  • center： 在两边
  • baseline 基线对齐
  • stretch 等高布局（项目没有高度）

响应式布局

css3媒体查询

css3媒体查询是响应式方案核心

媒体类型

• all 所有媒体（默认值）
• screen 彩色屏幕
• print 打印预览
• projection 手持设备
• tv 电视
  • braille 盲文触觉设备
  • embossed 盲文打印机
  • speech “听觉”类似的媒体设备
  • tty 不适用像素的设备

媒体属性

• width （可加max min前缀）
• height （可加max min前缀）
• device-width （可加max min前缀）
• device-pixel-ratio（可加max min前缀，需要加webkit前缀）
• orientation portrait竖屏 landscape横屏

操作符，关键字 (only,and,(，or),not)

• only： 防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式.
• and:连接媒体属性 、连接媒体类型 对于所有的连接选项都要匹配成功才能应用规则
• or(,) : 和and相似 对于所有的连接选项只要匹配成功一个就能应用规则
• not:取反