接地气的flex布局

2017.4.1买了域名，准备自己做个网站写写技术博客，眼看3周过去了还没点动静 = =先立下flag，看啥时候网站能上线

言归正传，今天总算把flex布局看了，争取用最少的字数整理出flex布局的大概。

在这篇文章里，参考资料才是本体：

一、几张 GIF 动图让你看懂弹性盒模型（Flexbox）如何工作 | llp的程序猿之路

直观到没朋友！10分钟对flex先大概有有个印象

链接：https://llp0574.github.io/2017/02/10/an-animated-guide-to-flexbox/

二、阮一峰大神的两篇flex介绍文章，分为“语法篇”和“实战篇”

先过一遍“语法篇”，然后自己尝试实现“实战篇”的所有效果。

链接：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

三、 flex设置成1和auto有什么区别？

这是我在实现”实战篇”时遇到的一个小问题。

答主是搜狗的大神，把flex属性相关知识讲解的非常清楚，包括flex-basis的计算= =

感觉flex属性是flex布局里面最复杂的属性，没有之一。理解了这个，flex布局应该就差不多了= =

如果能捎带手把答主的研究方法学到手，就上天了呀。

链接：https://segmentfault.com/q/1010000004080910/a-1020000004100314

四、最后玩个小游戏，帮助小青蛙回家吧= =

链接：http://flexboxfroggy.com/#zh-cn

五、总结一下

1.flex布局需要指定一个元素为容器，对其声明display:flex，从此，它的子元素的float、clear和vertical-align属性将失效。

2.align开头的属性，表示“XXX在交叉轴方向上的对齐方式”，content表示的是“主轴方向上的一行的内容”。举个栗子，align-content就是【“主轴方向上的一行的内容”在交叉轴方向上的对齐方式】

3.现在咱们给flex布局的12个属性们分一下组：

容器：【flex-direction ； flex-wrap；flex-flow；】；justify-content；align-items；align-content

子元素：order；【flex-grow；flex-shrink；flex-basis；flex；】；align-self

括号里的最后一个属性是前几个属性的简写，然后你再crtl + f 搜索一下“align”和“content”，观察一下高亮部分。

是不是觉得flex布局的12个属性已经被你牢牢记住了？