CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
Flex的两组核心概念 :容器与项目 主轴与侧轴 一条核心规则 :项目默认情况下永远排列在主轴的正方向上
容器
flex-direction 如何控制主轴是哪一根
flex-direction 如何控制主轴的方向
flex-direction:row; : x轴正方向
flex-direction:column; : y轴正方向
flex-direction:row-reverse; : x轴反方向
flex-direction:column-reverse; :y轴反方向
justify-content 富裕空间的管理（主轴）
justify-content ; 不会给项目区分配空间，只是确定富裕空间的位置
flex-start 主轴的正方向
flex-end 主轴的反方向
center
space-between
space-around 在项目的两边
align-items 富裕空间的管理（侧轴）
align-items; 不会给项目区分配空间，只是确定富裕空间的位置
flex-start 侧轴的正方向
flex-end 侧轴的反方向
center
baseline 跟基线有关
stretch 等高布局(项目得没有显示的指定高度 auto)
flex-wrap
flex-wrap属性控制了容器为单行/列还是多行/列。并且定义了侧轴的方向，新行/列将沿侧轴方向堆砌。
默认值：nowrap
可选值：nowrap | wrap | wrap-reverse
不可继承
align-content
align-content 属性定义弹性容器的侧轴方向上有额外空间时，如何排布每一行/列。当弹性容器只有一行/列时无作用
默认值：stretch
可选值：flex-start | flex-end | center | space-between | space-around | stretch
不可继承
flex-flow
flex-flow 属性是设置“flex-direction”和“flex-wrap”的简写
默认值：row nowrap
可选值: 参考“flex-direction”和“flex-wrap”
不可继承
项目
align-self
align-self 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值
默认值：auto
可选值：
auto | flex-start | flex-end | center | baseline | stretch
不可继承
order
order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局
默认值：0
可选值：数值即可,order越大越后
不可继承
flex-grow
flex-grow 属性定义弹性盒子项（flex item）的拉伸因子。
flex-basis
flex-basis 指定了 flex 元素在主轴方向上的初始大小
默认值 ：auto
不可继承
注意：在flex简写属性中 flex-basis的默认值为0
flex-shrink
flex-shrink 属性指定了 flex 元素的收缩因子 默认值为1
flex
flex 是 flex-grow，flex-shrink，flex-basis 的简写属性
默认值 flex-grow: 0
flex-shrink: 1
flex-basis: auto
可选值
flex: none; /* 0 0 auto */
flex：1; /* flex-grow:1 flex-shrink: 1 flex-basis:0% */
不可继承
Flex的弹性空间管理
flex-grow：
主轴上的富裕空间 = (主轴上的容器大小 - 所有相邻项目flex-basis的总和)
可扩展空间 = (主轴上的富裕空间 / 所有相邻项目flex-grow的总和)
项目最终的空间 = (flex-basis + (可扩展空间 x flex-grow值))
flex-shrink：
最终项目的大小=flex-basis- (收缩比例 / 收缩比例总和)x 溢出的空间) 错误!
正确:
1.计算收缩因子与基准值乘的总和
2.计算收缩因数
收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和
3.移除空间的计算
移除空间= 项目收缩因数 x 负溢出的空间
心得体会：
我学习了flex弹性布局，牢记了相关知识点，并且练习了flex的相关小游戏：如跳青蛙等flex游戏
收获颇大，我会继续努力学习下去
热爱前端，热爱代码。相信努力付出就会有回报！！
加油！努力吧！！！
