通过flexbox froggy认识flex弹性布局
在游戏通关过程中，我发现flex是display的属性，一般是用于box的定位布局。例如
#id{display:flex;属性+参数;}
MDN中介绍到Flex brought proper alignment capabilities to the web for the first time.也就是：flex首次为网页样式居中提供了合适的方案。
justify-content- 控制主轴（横轴）上所有 flex 项目的对齐。align-items- 控制交叉轴（纵轴）上所有 flex 项目的对齐。align-self- 控制交叉轴（纵轴）上的单个 flex 项目的对齐。align-content- 控制“多条主轴”的 flex 项目在交叉轴的对齐。
下面让我们来看一下游戏中flex的属性都有哪些？
1.justify-content，它是控制水平元素的对齐。
- flex-start，元素和容器左端对齐
- flex-end，元素和容器右端对齐
- center，元素和容器居中对齐
- space-between，元素间保持相同距离
- space-around，元素周围保持相同距离
2.align-items，它是控制垂直元素的对齐。
- flex-start，元素和容器顶部对齐
- flex-end，元素和容器底部对齐
- center，元素和容器居中对齐
- baseline，基线位置显示
- stretch，元素纵向拉伸以填满容器
3.flex-direction,控制元素在容器中的摆放方向
-
row，横向，元素摆放方向是和文字方向一致的（从左到右）
-
row-reverse，与文字方向相反（从右到左）
-
column，纵向，元素摆放方向是从上到下
-
column-reverse，从下到上
调换了摆放方向后，flex-start和flex-end对应方向也发生变化
以列为方向时，使用justify-content来控制纵向对齐，align-items是横向
如何调换方向可以通过看原先的首个元素的位置来判断，进而选择合适的属性来控制元素布局
4.flex-wrap，控制元素换行
- nowrap，不换行，所有元素在同一行
- wrap，元素自动切换多行
- wrap-reverse， 元素自动切换逆序多行
值得注意的是，flex-direction和flex-wrap经常搭配使用，可以简写为flex-flow；属性值表现为flex-flow:flex-direction参数 flex-wrap参数;参数至少写一个，写两个的时候中间用空格隔开。
5.align-content，控制行间距
- flex-start，多行集中在顶部
- flex-end，多行集中在底部
- center，多行集中在居中
- space-between，行间保持相同距离
- space-around，每行周围保持相同距离
- stretch，每一行拉伸填满容器
6、order，调整元素的顺序
- 0，默认值，顺序不变
- 正值，水平向右/垂直向上
- 负值，水平向左/垂直向下
7.align-self，控制单个元素的纵向变化
参数和align-items的一样。
以上就是我在flexbox froggy中总结的属性和参数，但仍有不是很清楚的内容（例如space-between和space-around的区别），后续会再进行知识的完善。
