grid

父容器上可以写的样式
display:grid
属性：
1.grid-template
    grid-template-rows:auto auto
    //分两行，每行高度auto
    grid-template-columns:auto auto auto
    //分三列，每列宽度auto
    //可以简写为grid-template: auto auto / auto auto auto
2.gap
    gap:10px 20px  //行间距：10px,列间距：20px
3.justify-content  
//整个栅格，横向
    start
    end
    center
    space-between
    ...
4.align-content  //整个栅格，纵向
5.justify-items
//每个元素位于每一栅格内的位置,横向
    strech
    start
    end
6.align-items
缩写
place-content: align-content, justify-content
place-items: align-items, justify-items

grid-template

gap

子元素上可以写的样式
justify-self
align-self
grid-area

flex

父元素：
flex-direction:row/column //横纵排列
flex-wrap:nowrap wrap //换行否
缩写
flex-flow:row nowrap
justify-content:
    start
    end
    center
align-content:  //记得要换行wrap
justify-items: //无意义
align-items: 
缩写
place-content: align-content, justify-content


子元素
flex-grow  放大（容器大于子元素，子元素不自动放大）
flex-shrink  缩小（缩小时如果父容器小于子元素，父容器会随之缩小）
flex-bassis 基线
缩写
flex: 0 1 auto 
    //flex-grow:0
    flex-shrink:1
    flex-bassis:auto
align-self

学习视频：【【前端】布局用的grid和flex样式】 www.bilibili.com/video/BV1tt…