七、CSS 速览 —— Flex弹性布局、移动布局、响应式布局

Flex弹性布局

Flex 布局概念

• 精确灵活控制块级盒子的布局，避免浮动布局中的脱标现象。
• 非常适合结构化布局。
• 父元素添加 display: flex，子元素可自动地挤压或拉伸。此时父元素称为弹性容器，子元素称为弹性盒子

调节盒子的间距

调节主轴

• justify-content: start 默认值
• justify-content: end
• justify-content: center
• justify-content: space-around
• justify-content: space-evenly
• justify-content: space-between

调节侧轴

• align-items: stretch 默认值，子级无高度时拉伸填满父级
• align-items: flex-start
• align-items: flex-end
• align-items: center
• align-self: 单独设置某个子级对齐方式

伸缩比

• flex: 整数;

移动端布局

网页元素的宽高随设备宽高等比缩放。
解决方案

• rem：目前的解决方案
• vw/vh：未来的解决方案

rem

• 相对单位，1rem = 1HTML字号大小
• 在rem中，HTML字号设为视口宽度的1/10
• 媒体查询：不同窗口设置不同HTML字号

  @media(width:375px) {
      html {
          font-size: 37.5px;
      }
  }
  

• 手淘开源的 flexible.js 根据不同视口宽度给HTML根节点设置不同 font-size
• 利用预处理器 less 换算 rem 尺寸。

vw/vh

• 相对单位，相对视口尺寸的计算结果
• 1vw = 1/100 viewport width
• 1vh = 1/100 viewport height

响应式布局

检测视口宽，不同宽度响应不同的布局

媒体查询

@media (媒体特性) {
  选择器 { 样式 }
}

<link rel="stylesheet" media="(min-width:400px)" href="xx.css">

• min-width、max-width、width 属性

• orientation: portrait/landscape

• 视口宽小于768px，认为是手机端，隐藏侧栏

  @media (max-width:768px) {
    .left { display: none;}
  }
  

BootStrap

封装好的响应式框架

<link rel="stylesheet" href="./bootstrap-3.4.1-dist /css/bootstrap.css">

栅格系统

BootStrap3默认将网页分成12份

屏幕尺寸	栅格类
> 0px	col-xs-*
> 768px	col-sm-*
> 992px	col-md-*
> 1200px	col-ls-*

• .container 版心样式，左右有15px的padding。
• .row 有15px的margin，可抵消container类的15px的padding。
• .container-fluid 宽度100%，左右有15px的padding。

BootStrap官网