flex布局与grid布局

最近有玩两个挺有意思的css小游戏，从中分别学习了flex布局和grid布局的，前一个叫FLEXBOX FROGGY，后者叫Grid Garden，游戏是通过在线补齐css属性来通过关卡。   一、flex布局   首先通过 display: flex 来声明 flex 布局。   justify-content 属性 设置水平对齐样式；

• flex-start: 元素和容器的左端对齐。
• flex-end: 元素和容器的右端对齐。
• center: 元素在容器里居中。
• space-between:元素之间保持相等的距离。
• space-around:元素周围保持相等的距离。

align-items 属性 设置垂直对齐方式；

• flex-start: 元素与容器的顶部对齐。
• flex-end: 元素与容器的底部对齐。
• center: 元素纵向居中。
• baseline: 元素在容器的基线位置显示。
• stretch: 元素被拉伸以填满整个容器。

flex-direction 属性 设置元素在容器内的的摆放方向；

• row: 元素摆放的方向和文字方向一致。
• row-reverse: 元素摆放的方向和文字方向相反。
• column: 元素从上放到下。
• column-reverse: 元素从下放到上。

order 属性 设置单个元素的的顺序 属性值为正数或负数；

align-self 属性 控制单个元素的属性，属性值与 align-items 一样；

flex-wrap 属性 控制元素在行数排列，以及排列的顺序；

• Nowrap: 所有的元素都在一行。
• wrap: 元素自动换成多行。
• wrap-reverse: 元素自动换成逆序的多行。

 flex-flow 属性 该属性是flex-direction 和 flex-wrap的缩写属性，接受两个属性的值，中间用空格隔开；

align-content 属性 决定行与行之间的间隔；

• flex-start: 多行都集中在顶部。
• flex-end: 多行都集中在底部。
• center: 多行居中。
• space-between: 行与行之间保持相等距离。
• space-around: 每行的周围保持相等距离。
• stretch: 每一行都被拉伸以填满容器。

 

 二、grid布局 首先通过 display: grid 来声明 grid 布局。   grid-column-start  grid-column-end 分别表示水平方向上开始网格项开始与结束的索引数。 （注意：grid-column-end 不一定比 grid-column-start 大，且索引数也可为负值。）  

 

 

grid-column 属性是 grid-column-start 和 grid-column-end 的缩写，可以写两个属性的值，中间用“/”分隔。

grid-row-start  grid-row-end 分别表示垂直方向上开始网格项开始与结束的索引数。

grid-row 属性是 grid-row-start 和 grid-row-end 的缩写。

grid-area 属性是 grid-row-start grid-column-start grid-row-end grid-column-end的缩写，中间用 “/”分隔。

 

 order 属性 控制单个元素的位置，可以为正数或负数。

grid-template-columns和grid-template-rows用于设置Grid布局的行列中网格轨道的大小。