Flex笔记
语法知识点总结
布局设置为display:flex或行内布局inline-flex，拥有水平的主轴和垂直的交叉轴，通过justify-content可设置布局子元素(项目)在主轴的对齐方式，align-items则控制项目在交叉轴的对齐方式，使用flex-wrap使元素在主轴的换行策略。在多行项目的情况下可使用align-content对齐项目在两根轴的对齐方式。align-self默认继承父布局的align-items,没有父布局时默认为stretch，可单独设置项目对齐方式。flex-flow可同时设置主轴换行策略与方向。
主轴方向通过flex-direciton切换。有水平从左到右row，从右到左row-reverse，垂直从上到下column，从下到上column-reverse四种。默认从左到右row。
换行策略默认不换行nowrap，或使第一行位于左上方wrap，第一行位于下方wrap-reverse三种。
对齐主轴有位于轴线开始处的flex-start，结束处的flex-end，中心的center，以及首尾不留空位均分轴线的space-between和首尾留空均分轴线的space-around。
对齐交叉轴时则包含对齐项目文本基线的baseline和不设置高度情况下的拉伸占满容器的stretch
以上是容器的属性，接下来项目的显示顺序可以由order属性决定，flex-grow则是决定项目占容器大小的比例，为0则存在剩余空间也不放大，如果所有项目flex-grow设为1则会均分剩余空间。flex-shrink则是设置项目的缩小比例，默认1为空间不足时项目将缩小，都为1时则全部等比例缩小，但如果有一个为0，其它全为1则空间不足时为0的不缩。需要设置项目占据主轴的空间可以设置flex-basis。单独需要设置对齐方式可使用align-self，flex属性则是对flex-grow，flex-shrink和flex-basis的简写，默认值为 0 1 auto
来自对阮一峰Flex语法教程的总结
练习
Flexbox Froggy - A game for learning CSS flexbox (codepip.com)
弄懂flex之后，这个使用flexbox推进进程的小游戏就挺有意思的，不难但是能练习语法。
最后一关还是想了想才得出答案
flex-wrap: wrap-reverse;
flex-direction: column-reverse;
align-content:space-between;
justify-content:center;
事实上学完不怎么碰之后过了一个月又忘得差不多了(
实例
均分布局
