sailei1
commented
4 years ago grid 布局 https://cssgridgarden.com/
display: grid; 二维布局
grid-column-start:表格开始列数(水平方向) grid-column-end：表格结束列数(水平方向) 可以为负值 代表反方向 span 代表一个网格的宽度 grid-column: 2 / 4;就会设置网格项从第二列开始，到第四列结束。
grid-row-start: 表格开始行数 （垂直方向） grid-row-end: 表格结束行数(垂直方向)
grid-row：3/span 3 设置从第3行开始 后面画3行（grid-row:3/6 到第6行）
grid-area属性接受4个由'/'分开的值： grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。
order来调整顺序,默认0, 调整大小来控制排序.
grid-template-columns 可以控制 水平方向的尺寸 如果相同 可以用 repect 函数 grid-template-columns: repeat(8, 12.5%); 创建8列，每列占12.5%的宽度。
grid-template-columns不仅仅只接受百分比的值，也接受像像素或ems这样的长度单位。你甚至可以将不同的长度单位混合使用。
fr 单位代表比例单位 grid-template-columns:1fr 4fr; 1个占1/5 另一块占4/5 类似flex 可以将px和fr单位结合起来
grid-template是grid-template-rows和grid-template-columns的缩写形式。
grid-template:1fr 50px/1fr 4fr
先垂直方向 分两块 1块 100%-50 另一块50px
再水平方向 分两块 1块 20% 另一块 80%
flex 布局 http://flexboxfroggy.com/#zh-cn
display: flex;
justify-content属性可以水平对齐元素 align-items属性可以纵向对齐元素
接受以下几个参数: flex-start: 元素和容器的左端对齐 flex-end: 元素和容器的右端对齐 center: 元素在容器里居中 space-between:元素之间保持相等的距离 space-around:元素周围保持相等的距离 stretch 默认状态
flex-direction属性性定义了元素在容器里摆放的方向, 接受: row row-reverse column column-reverse flex-wrap决定是否换行,接受 wrap nowrap wrap-reverse.
flex-flow flex-direction 跟 flex-wrap 的缩写
order来调整青蛙的顺序,默认0, 调整大小来控制排序.
align-self控制单个元素 align-content来决定行与行之间隔多远
接受以下几个参数: flex-start: 元素和容器的左端对齐 flex-end: 元素和容器的右端对齐 center: 元素在容器里居中 space-between:元素之间保持相等的距离 space-around:元素周围保持相等的距离 stretch 默认状态