放弃绝对定位重学flex,这两个游戏让你爱上使用flex
大家好,我是前端实验室的大师兄!
今天就和大家重学一下flex布局，为什么要学习flex呢？那就不得不和大家说说大师兄的惨痛经历了。
我们都知道传统的布局方式，都是基于盒状模型，依赖display属性 +position属性 + float属性。
大师兄也是一个传统的人，所以当然使用的是传统方式布局了~
于是整个网页布局通篇下来，都是position搞的。
好s不s,我们的项目是响应式布局，卡片数量不固定，根据卡片数量排列方式又不一定！！！
可以想象的到，我写的页面是多么的惨不忍睹
大佬问我，你怎么不用flex布局啊？
我：flex?怎么用的呀？那几个属性不都记不住啊！学它太无聊了！！！
说完，大神唰唰甩给我几个网站
大神：别着急，听我给你娓娓道来
基础语法
首先要知道，Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。要想使用它，就要给父盒子加上display:flex
.box{
display: flex;
}
flex-direction 改变元素主轴方向
它有四个值可以选择
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap换行方式
默认情况下，所有的子元素都排在一条线，可以通过flex-wrap改变子元素的换行方式。
nowrap是默认不换行
wrap是换行，当子元素的宽度之和超过父元素的宽度时，自动换行
3. wrap-reverse换行，第一行在下方。
justify-content主轴对齐方式
align-items次轴对齐方式
通过 css-tricks 这个网站可以很好地通过图文的方式学习flex布局的基础语法
更多更详细的介绍，大家可以看这个网站https://css-tricks.com/snippets/css/a-guide-to-flexbox/
玩游戏学布局
http://flexboxfroggy.com/#zh-cn这个网站，就是通过使用flex的各个属性，帮助小青蛙找到他们的位置。
当你看完css-tricks网站的内容，就可以立刻来玩这个游戏，来加深对flex的理解
前几关还是比较容易的
通过游戏的方式，加深理解flex的各个属性的用法，而且每一关都有相应属性的介绍和提示
还有一个更好玩的塔防游戏相比于静态的游戏，我个人还是比较喜欢玩这个塔防游戏
通过移动大炮的位置，来攻击敌人，保卫家园
公众号后台回复flex即可获取flex的图文链接和游戏链接，不仅能玩游戏，还能学到知识呦！
进了前端门，便是一家人 原创不易,点赞、留言、分享就是大师兄写下去的动力!