Flex布局和Grid布局小游戏

最近发现了两个挺有意思的css小游戏,分别是学习flex布局和grid布局的,前一个叫FLEXBOX FROGGY,后者叫Grid Garden,在线补齐css属性来通过关卡,也正好可以一边放松一边复习下相关的布局知识.

Grid Garden知识点

如何声明Grid布局? display: grid; display: inline-grid;或者display: subgrid;
grid-column-start和grid-column-end作用于网格项的开始结束,start不一定比end小,且都可以为负数.
除了取数值外,还可以使用span关键字.格式是span 意思是跨越多少个网格轨道.
可以使用grid-column: /来简写, span关键字适用此缩写.
grid-area属性可以再次简写,接收4个由/隔开的值,依次为:grid-row-start, grid-column-start, grid-row-end, grid-column-end.
存在属性关键字:order,order类似于z-index表明叠放顺序,数值越大,越在上.允许负数.
grid-template-columns和grid-template-rows用于设置Grid布局的行列中网格轨道的大小.
repeat函数可以简化多个同值,格式为repeat(N, value),其中N是个数,value是值.repeat可以与其他值混用,如:grid-template-columns: repeat(N-1, value) value.
定义上述属性时,允许长度单位混合使用.
fr用于等分等分网格容器剩余空间.举例说明:设有A B C三个网格轨道,他们的grid-template-columns的设置依次是1fr 2fr和3fr.那么他们共同把一个行分为6等分,则A B C的空间就依次获得了这一行的1/6、2/6和3/6.
fr是可以和其他单位混用的,如grid-template-columns:1fr 50px 1fr 1fr.计算优先级记住一点即可:除了auto之外,先计算所有固定值(包括百分数)后,剩下的空间再计算fr.

如何声明Flex布局? display: flex;
justify-content属性可以水平对齐元素,并且接受以下几个参数:
- flex-start: 元素和容器的左端对齐
- flex-end: 元素和容器的右端对齐
- center: 元素在容器里居中
- space-between:元素之间保持相等的距离
- space-around:元素周围保持相等的距离
align-items属性可以纵向对齐元素
flex-direction属性性定义了元素在容器里摆放的方向,接受: row row-reverse column column-reverse
存在order来调整青蛙的顺序,默认0,但是我们设置这个属性为正数或负数.
使用align-self控制单个元素,接受和align-items一样的那些值.
flex-wrap决定是否换行,接受 wrap nowrap wrap-reverse.
align-content来决定行与行之间隔多远,接受flex-start flex-end center space-between space-around stretch.