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 <number>意思是跨越多少个网格轨道.
• 可以使用grid-column: <start>/<end>来简写, 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.

Flexbox Froggy知识点

• 如何声明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.