转化为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
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #flex布局 #gird布局 #转化为flex布局div #换行flexdirection #决定行排还是列排
