青蛙小游戏学习flex布局
什么是flex布局？
flex布局又称“弹性盒布局”，顾名思义元素就像有弹性一样，会根据空间的大小弹性地分布，甚至会像有弹性一样改变自身的宽度或高度“挤”在同一容器中。
flex布局的组成
flex布局主要由2个内容组成：父元素container，以及子元素items，items在container中实现flex布局。container items是大家约定俗称的称呼。
flex布局的重点代码：
display:flex
flex-direction:row/column
flex-wrap:wrap;
justify-content:center/space-between
align-items:center
flex布局的注意点
1. 尽量不要给定固定的 width height，否则弹性布局会变得不那么弹性。
2. 使用min-width、max-width、min-height、max-height来限制宽度
3. flex布局和margin-xxx：auto 搭配使用有以外的效果。
container的样式
1. 主轴的流动方向：flex-direction
- row：默认值，从左到右
- column：从上到下。
- row-reverse：反row，即从右到左。
-
column-reverse：反column，即从上到下
flex-direction
2. 折行：flex-wrap
-
wrap：折行
wrap -
nowrap：不折行，默认值。不折行的情况下，当item总宽度大于container总宽度，item的宽度会被挤压。
nowrap -
wrap-reverse：反向折行，非常反人类，不推荐使用。
wrap-reverse
3. items排列类型（要考虑主轴的方向）：justify-content
flex-start：默认值，根据主轴方向，所有items往开始的方向（左、上）靠拢
flex-end：根据主轴方向，所有items往终点方向（右、下）靠拢
-
space-between：多余的空间放在中间。
space-between -
space-around：多余的空间以环绕items的模式排列。每个item两边都有同样大小的间隔（item1的右边的间隙是item1自己右边的间隙+item2左边的间隙）。
space-around -
space-evenly：多余的空间以环绕items的模式排列，但是整体间隙平均化（不是完全平均，但是可以先这么理解）。
space-evenly
4. 次轴方向（当item高度不一的时候才会涉及到）：align-items（注意这个复数s）。次轴方向就是和主轴方向垂直的轴。
-
strech：所有item的长度或宽度拉伸至与最长或者最宽的item相同。前提是这些items都没有固定的width或height，否则还是会以给定的width height为主，不会伸缩。
strech -
flex-start：根据次轴的方向，所有items往开始的方向（上、左）靠拢
flex-start -
flex-end：根据次轴的方向，所有items往开始的方向（下、右）靠拢
flex-end -
center：根据次轴方向，所有items居中对齐
center baseline：根据文字的基线对齐。基本不会使用。
5. 多行内容排列：align-content
可能的值：space-between space-around flex-start flex-end center strech
6.flex-flow：缩写样式 将 flex-direction flex-wrap写在一起，空格隔开。
items的样式
flex-basis：默认为auto，指定了 items 在主轴方向上的初始大小。一般不使用，而是用width、height代替。
-
order：默认为0。order越大，item的排列顺序就越往后。order相同的item根据html的顺序排列。order可以是负数，也是越小越靠前。
order flex-grow：影响多余空间的分配，值越大分配的空间越多，分配比例：flex-grow/总flex-grow。默认值为0，不分配任何多余的空间。
- flex-shrink：当container空间全部被占满且不足时，flex-shrink值越大的item将会被“挤压”得越厉害。默认值为1。
- align-self：属性值和align-items的一样，只是它只作用于一个item，而align-items作用于所有items。
- flex：flex-grow flex-shrink flex-basis 三个样式的缩写，空格隔开
