flex是一维布局,grid是二维布局,横纵两个方向总是同时存在的
作用在grid容器上
grid-template-columns对网格进行纵划分,单位可以是px,%,自适应auto,fr(网格剩余空间比例单位)
grid-template-rows网格进行横划分
grid-template-rows:repeat(4,1fr);重复形式
grid-template-areas:grid子项只要使用grid-area属性指定其隶属于哪个区
grid-template以上三个的简写形式
grid-column-gap定义网格间隙
grid-row-gap
grid-gap以上两个简写
justify-items网格元素内容水平呈现方式:拉伸stretch/左中右对齐start/end/center
align-items网格元素内容垂直呈现方式:拉伸/上中下对齐start/end/center
place-items以上两个简写,第一个垂直第二个水平
父容器需要调大的情况下使用:
justify-content网格元素水平分布方式stretch/start/end/center/space-between/space-around/space-evenly
align-content网格元素垂直分布方式
place-content以上简写
作用在grid子项上(单个子元素)
1.grid-column-start水平方向上占据的起始位置
2.grid-column-end水平方向上占据的结束位置(span属性)向后添加的个数
3.grid-row-start垂直方向上占据的起始位置
4.grid-row-end垂直方向上占据的结束位置(span属性)
5.grid-column:1和2的缩写
6.grid-row:3和4的缩写
例grid-column:2 / 4;
7.grid-area当前网格所占用的区域
grid-area:3横向起始/2纵向起始/4横向结束/4纵向结束
8.justify-self单个网格元素的水平对齐方式start/end/center
9.align-self单个网格元素的垂直对齐方式
10.place-self:9和8的缩写
vw+rem布局
1vw = 1%视口宽
100vw = 视口宽
100vh = 视口高
html{
font-size:100px;最合适,量完尺寸/2后小数点直接向前进两位
换算成vw?可以让根元素font-size时时发生改变
iphone6/7/8: 100vw = 375px
100px = 26.67vw
iphone5: 100vw = 320px
100px = 31.25vw
}