刚才在网上复习flex布局，发现了一篇很不错的文章，虽然是翻译的国外技术贴，看过后，还是对flex有了更深的认识。

先上笔记：

1、flex容器 + flex项目 ==> flex布局。
2、justify-content 设置主轴上的对齐方式，默认flex-start，也就是左对齐。
3、align-items 设置交叉轴上的对齐方式，默认stretch，也就是拉伸。
4、align-content 如果主轴上有多行，它设置对齐方式。不常用。

下面是flex项目总结：

1、flex-grow 默认是0，也就是默认项目不放大。
2、flex-shrink 默认是1，意味着容器空间不够用的时候，所有项目等比例缩小。
3、那么，问题来了flex-basis是个什么鬼？

使用时，感觉这家伙和width好像啊，有木有？好像就是设置个宽度而已。那和width有啥关系呢？直接上公式：

content < width < flex-basis (limted by max|min-width)

划重点了！！！

当我们不设置flex-basis的时候，元素会根据width渲染宽度。如果懒到家，连width都没写，元素就根据自身的宽度渲染。

如果你设置了flex-basis，width就没用了。but，max-width和 min-width 才是最后的大boss，这俩货会严格限制flex-basis。比如：

flex-basis: 100px;
width: 80px;// 最终宽度：100px

flex-basis: 100px;
min-width:120px;// 最终宽度：120px

flex-basis: 100px;
max-width: 60px;// 最终宽度：60px