弹性盒布局
flexbox弹性盒 <给父元素添加display：flex>
一、flex容器中的属性与属性值
1、display:flex; 将父元素变成flex容器
2、主轴方向:
- flex-direction: row 横向排列 / row-reverse 反方向并横向排列 / column 竖向排列 / column-reverse 反方向并竖向排列
- flex-wrap：wrap 允许换行 / nowrap 不允许换行 / wrap-reverse 反向换行
- justify-content: flex-start 元素紧靠主轴的起点（默认值）/ flex-end 元素紧靠主轴的终点 / center 元素在主轴方向居中对齐 / space-between 主轴方向空白区域平分给元素之间 / space-around 主轴方向空白区域平分给元素两端
3、交叉轴方向：
- 单行：align-items：flex-start 元素紧靠交叉轴的起点 / flex-end 元素紧靠交叉轴的终点 / center 元素在交叉轴方向居中对齐 / stretch 拉伸 没有设置侧轴方向上的宽/高时，等于父盒子的宽或高（默认值）
- 多行：align-content：flex-start 元素紧靠交叉轴的起点 / flex-end 元素紧靠交叉轴的终点 / center 元素在交叉轴方向居中 / stretch（默认值）/ space-between 交叉轴方向空白区域平分给元素之间 / space-around 交叉轴方向空白区域平分给元素两端
二、flex项目中的属性与属性值
1、交叉轴方向对齐方式：
- align-self： flex-start 该项目紧靠交叉轴方向上的起点 / flex-end 该项目紧靠交叉轴方向上的终点 / center 该项目在交叉轴方向上居中
2、顺序：
- order：number； 数字越大，该项目越在后排列
- 可以写负值，默认为0
3、flex-grow
- 用于将弹性盒子的可用空间，按照比例分配给弹性元素。
4、flex-shrink
5、flex-basis
- 大部分情况下与宽度相等，即设置长度，固定大小，优先级比宽要高。定义了元素在主轴上的空间。
三、注意事项
- 弹性元素：
1、不要再去设置float。2、设置完绝对定位后，该元素就不再是弹性元素了，不参与弹性布局。3、
弹性元素均为块级元素。
四、青蛙小游戏
