1.Flex弹性盒模型

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。

2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这样功能。

作用在Flex容器上 作用在Flex子项上
flex-direction order
flex-wrap flex-grow
flex-flow flex-shrink
justify-content flex-basis
align-items flex
align-content align-self

flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

取值 含义
row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右
row-reverse 显示为行，但方向和row相反
column 显示位列
column-reverse 形式为列，但方向相反

flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示

取值 含义
nowrap 默认值，表示单行显示，不换行
wrap 宽度不足换行显示
wrap-reverse 宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的咨询现在跑到上面

flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。

justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式。

取值 含义
flex-start 默认值，表现为起始位置对齐
flex-end 结束位置对齐
center 居中对齐
space-between 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素之间区域分配
space-around around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽空白间距，最终视觉上边缘两个的空白只有中间空白宽度的一半
space-evenly evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等

align-items

align-items中的items值得就是flex子项们，一次align-items值得就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

取值 含义
stretch 默认值，flex子项拉伸
flex-start 表现为容器顶部对齐
flex-end 表现为容器底部对齐
center 表现为垂直居中对齐

align-content

align-content可以看成和justify-content是相似且队里的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的

取值 含义
stretch 默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%
flex-start 起始位置对齐
flex-end 结束位置对齐
center 居中对齐
space-between 两端对齐
space-around 每一行元素上下都享有独立不重叠的空白空间
space-evenly 每一行元素都完全上下等分

作用在flex子项上的CSS属性

取值 含义
order 可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0
flex-grow 属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0
flex-shrink 属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1
flex-basis flex-basis定义了在分配剩余空间之前元素的默认大小
flex flex属性是flex-grow，flex-shrink和flex-basis的缩写
align-self align-self指控制单独某一个flex子项的垂直对齐方式

Flex案例

2.Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在

作用在grid容器上 作用在grid子项上
grid-template-columns grid-column-start
grid-template-rows grid-column-end
grid-template-areas grid-row-start
grid-template grid-row-end
grid-column-gap grid-column
grid-row-gap grid-row
grid-gap grid-area
justify-items justify-self
align-items align-self
place-items place-self
justify-content  
align-content  

place-content

grid-template-columns和grid-template-rows

grid-template-areas和grid-template

grid-column-gap和grid-row-gap

justify-items和align-items

取值 含义
stretch 默认值，拉伸。表现水平或垂直填充
start 容器左侧或顶部对齐
end 容器右侧或底部对齐
center 水平或垂直居中对齐

justify-content和align-content

justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。

取值 含义
stretch 默认，拉伸。表现为水平或垂直填充。
start 容器左侧或顶部对齐
end 容器右侧或底部对齐
center 水平或垂直居中
space-between 两端对齐
space-around 享有独立不重叠的空白空间
space-evenly 平均分配空白空间

作用在grid子项上的CSS属性

取值 含义
grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置。（span属性）
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置。（span）
grid-column grid-column-start+grid-column-end的缩写
grid-row grid-row-start+grid-row-end的缩写
grid-area 表示当前网格所占用的区域，名字和位置两种表示方法
justify-self 单个网格元素的水平对齐方式
align-self 单个网格元素的垂直对齐方式
place-self align-self和justify-self的缩写

Grid案例

image-20191218160342261

Viewport视口

Viewport设置

通过<meta>标签进行设置，name属性指定Viewport值，content属性进行视口配置。

取值 含义
width 设置layout viewport的宽度特定值，device-width表示设备宽
height 设置layout viewport的高度特定值，一般不进行设置
initial-scale 设置页面的初始缩放
minimum-scale 设置页面的最小缩放
maximum-scale 设置页面的最大缩放
user-scalable 设置页面能否进行缩放

移动端适配方案

image-20191218161528158

image-20191218161540082

流式布局原则

image-20191218161650268

rem布局

单位：

动态设置font-size：