布局

弹性布局逆战班
（1）flex-flow是flex-direction和flex-wrap属性的简写方式，flex-direction定义了放置方向，默认是row，（一般是由左往右）。
（2）flex-wrap属性表示，如果一条轴线排不下，要不要换行，nowrap（默认）：不换行。wrap：换行，第一行在上面，wrap-reverse：反向换行
（3）justify-content表示在主轴上的对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐center： 居中space-between：两端对齐，子项平均分。space-around：每个子项两侧的间隔相同
（4）align-items表示项目在交叉轴上也就说侧轴上如何对齐他的属性跟justify－content属性一样…只有一行的时候用它
（5）align-content表示***多个子项***对齐方式。如果项目只有一个子项，该属性不起作用。
（6）写在子项上的属性有:
order :排列顺序。数值越小，排列越靠前，默认为0。
flex-grow:放大比例，默认为0，如果还有剩余空间，也不放大。
flex-shrink:缩小比例，默认为1，如果空间不足，该项目将缩小。
align-self:单独控制某一个子项
给子项设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式
网格布局
（1）grid-template-columns创建网格的列数
（2）grid-template-rows行数
（3）grid-template-areas划分区域“a1 a1 a2 a3”
（4）grid-gap可以取一个或两个值，表示行列之间的间隙。
（5）justify-items沿着 行轴线(row axis) 对齐
（6）align-items沿着 列轴线(row axis) **
rem布局
一般把屏幕的宽分为100份，一份为1rem 一般先定义html的fontsize大小，一般为26.66667rem，然后在给body重置字体大小，vscode里面有个插件叫，px to rem非常方便，快捷键是crt+z.一般按照苹果六的屏幕去做，在ps里面先改图片的默认像素，
响应式布局
@media all and (min-width: 480px) {
body { background-color: lightgreen; }
}
（1）all 试用于所有设备 print :打印机
screen: 电脑
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）