转化为flex布局
.div {
display：flex；
}
justify-content 设置行内位置
align-items 单行位置
align-content多行位置
flex-wrap：warp 换行
flex-direction 决定行排还是列排 默认行排
background：-webkit-linear-gradient（ color，color）从什么颜色渐变到什么颜色
div:nth-child（1）第一个块
div:nth-child（2）第二个块
gird布局关于网格状分布
定义父盒子display:grid即可，小盒子就能成网格分布
.grid {
display：grid；
grid-template-colums：100px 100px 100px；
}
.grid {
display：grid；
grid-template-colums：1fr 1fr 1fr；
}
fr是grid专用单位
.grid {
display：grid；
grid-template-colums：1fr 2fr 1fr；
}
.grid {
display：grid；
grid-template-colums：1fr 2fr 1fr；
row-gap：24px；
column-gap：24px；设置行间距列间距
}
grid-temple-areas