通过游戏学习flexbox的网站

最近发现一个网站 https://flexboxfroggy.com/#zh-cn ，这个网站可以让你通过游戏的方式来学习flexbox布局。

网站是通过关卡的方式来一步一步的介绍flexbox中的属性。

我们先来复习一下flexbox中的属性。

flexbox属性

justify-content属性这个属性可以水平对齐元素，并且接受以下几个参数：

flex-start: 元素和容器的左端对齐。

flex-end: 元素和容器的右端对齐。

center: 元素在容器里居中。

space-between:元素之间保持相等的距离。

space-around:元素周围保持相等的距离。
align-items属性

这个CSS属性纵向对齐元素并且可选以下几个值：

flex-start: 元素与容器的顶部对齐。

flex-end: 元素与容器的底部对齐。

center: 元素纵向居中。

baseline: 元素在容器的基线位置显示。

stretch: 元素被拉伸以填满整个容器。
flex-direction属性

这个CSS属性纵向对齐元素并且可选以下几个值：

row: 元素摆放的方向和文字方向一致。

row-reverse: 元素摆放的方向和文字方向相反。

column: 元素从上放到下。

column-reverse: 元素从下放到上。
order属性

order属性可以决定元素的排列顺序。元素的属性默认值为0，但是我们设置这个属性为正数或负数。
align-self属性

这个属性接受和align-items一样的那些值，用于控制单个元素。
flex-wrap属性

flex-wrap属性主要用于控制元素是否换行。这个属性接受这些值：

nowrap: 所有的元素都在一行。

wrap: 元素自动换成多行。

wrap-reverse: 元素自动换成逆序的多行。
flex-flow属性

flex-direction和 flex-wrap 两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。

举个例子，你可以用flex-flow: row wrap;去设置行并自动换行。
align-content属性 align-content来决定行与行之间隔多远。这个属性接受这些值：

flex-start: 多行都集中在顶部。

flex-end: 多行都集中在底部。

center: 多行居中。

space-between: 行与行之间保持相等距离。

space-around: 每行的周围保持相等距离。

stretch: 每一行都被拉伸以填满容器。

这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果

第1关

第1关主要是介绍justify-content属性

比较简单，将小青蛙移动到最右侧即可。

#pond {
    display: flex;
    justify-content:flex-end;
}

第2关

第2关主要是复习justify-content属性，这次是让小青蛙居中。

#pond {
    display: flex;
    justify-content: center;
}

第3关

第3关主要是复习justify-content属性

#pond {
    display: flex;
    justify-content:space-around;
}

第4关

第4关主要是复习justify-content属性

#pond {
    display: flex;
    justify-content:space-between;
}

第5关

第5关主要是学习align-items属性

#pond {
    display: flex;
    align-items:flex-end;
}

第6关

第6关主要是复习justify-content和align-items属性

#pond {
    display: flex;
    flex-wrap: wrap;
    align-content:flex-end;
}

第7关

第7关依然是复习justify-content和align-items属性

#pond {
    display: flex;
    justify-content:center;
    align-items:center;
}

第8关

第8关是学习flex-direction属性

这个CSS属性定义了元素在容器里摆放的方向

#pond {
    display: flex;
    flex-direction:row-reverse;
}

第9关

第9关主要是复习flex-direction属性

#pond {
    display: flex;
    flex-direction:column;
}

第10关

第10关主要是复习flex-direction和justify-content属性

#pond {
    display: flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
}

第11关

第11关依然是复习flex-direction和justify-content属性

#pond {
    display: flex;
    flex-direction:column;
    justify-content:flex-end;
}

第12关

第12关依然是复习flex-direction和justify-content属性

#pond {
    display: flex;
   flex-direction:column-reverse;
    justify-content:space-between;
}

第13关

第13关主要是是复习flex-direction、justify-content和align-items属性

#pond {
    display: flex;
    flex-direction:row-reverse;
    align-items:flex-end;
    justify-content:center;
}

第14关

第14关主要是学习order属性

order属性可以决定元素的排列顺序。元素的属性默认值为0，但是我们设置这个属性为正数或负数。

#pond {
    display: flex;
    order:1;
}

第15关

第15关主要是复习order属性

order的值越小，排序越靠前

#pond {
    display: flex;
    order:-1;
}

第16关

第16关主要是学习align-self属性

这个属性接受和align-items一样的那些值，用于控制单个元素。

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {

    align-self:flex-end;
}

第17关

第17关主要是复习align-self和order属性

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {

    align-self:flex-end;
    order:1;
}

第18关

第18关主要是学习flex-wrap属性

#pond {
    display: flex;
    flex-wrap:wrap;
}

第19关

19关主要是复习flex-wrap和flex-direction属性

#pond {
    display: flex;
   flex-direction:column;
    flex-wrap:wrap;
}

第20关

20关主要是学习flex-flow属性

#pond {
    display: flex;
   flex-flow: column wrap;
}

第21关

21关主要是学习align-content属性

#pond {
    display: flex;
    align-content:flex-start;
}

第22关

22关主要是复习align-content属性

#pond {
    display: flex;
    flex-wrap: wrap;
    align-content:flex-end;
}

第23关

23关主要是复习flex-direction和align-content属性

#pond {
    display: flex;
    flex-wrap: wrap;
    flex-direction:column-reverse;
    align-content:center;
}

第24关

24关是最后一个关卡，是对前面学习的属性的一个总结。

#pond {
    display: flex;
    flex-direction:column-reverse;
    flex-wrap:wrap-reverse;
    align-content:space-between;
    justify-content:center;
}

管大侠