flex 一行两个_这就是flex

对flex的第一印象就是解决响应布局存在的，使得布局的设置更灵活，但随之而来的是需要明白flex内部是怎么绘制的，一直以来就是看一下其api, 大概知道什么意思，上来就开始写，但对这个玩意却一直没有达到朋友的地步，这就是flex, 根据自己的demo慢慢来撕开它

首先，flex就是一个容器，一个大盒子，凡是在这个盒子内的元素都要尊师其制定的位置规则，这个元素该在哪，另外一个元素该在哪，我有我的规则，要想在里面呆着，就要遵守规则，否则展示一团乱。

规则一.  布局方向 横向还是纵向。flex-direction: row，里面的元素按照横向排列，向左看！。 column: 乖乖的按照纵向排好对，向上看！

先站好队

纵向排列

横向排列

规则二.  所处位置justify-content, align-items, align-content

什么意思呢？站好队了，但是在这个flex盒子里的位置还没明确，从哪开始站队，并保持这个方向。决定站的位置有两个：先看第一个justify-content。这个规则决定了你在水平方向的位置，默认的位置是在最左边.

这两个规则都有同样的位置选择：请看下图

flex-start, center, flex-end, space-around, space-between

从上图可以看出，justify-content就相当于一个指挥官，里面的人从开始给我站好，从中间给我站好，从末尾开始站好，两边分开站好，均匀排列站好。里面的这些小弟，乖乖的在指定的方向上站好。

同上面，只不过站的方向按照垂直方向开始

align-content和align-items一样，区别在于flex盒子内元素是否是按一行站好，如果分成了多个队列，那么align-content会把多个队列当做成一个整体，再按照左，中，底等战队，否则每一行各自应用战队规则。就好比军训，各队向左向右看齐，齐步走，走啊走，走到center,或者flex-start, flex-end的位置；另外就是各队按照小组散开，各小组按照所划分的区域向左向右看齐。

规则三. 在我内部超过一行是否要换行:flex-wrap.

什么意思呢？就是说我的房间就这么大，你们这些小弟按照一行或者一列站好，按照上图所示，人太多，一行不够站，那怎么办，就是靠这个规则来指定了，是要换到第二行还是给你们每个人瘦身，还是站在一行，请看下图：

left:挤在一列（行）, right: 换行了，我不跟你们挤在一起

万能分割线^^………………………………………………………………………………………………………………………………………………………………………………

好了，说完了那个盒子上的属性，看看盒子内的元素的一些规则把，总不能只能指挥官有规则把，我也得有点自我张扬的个性把，展示自我个性的时候到了

规则1. 战队顺序：order

一开始，小兵门按照盒子内出现的顺序依次站好，也就是先到先得，谁让你来的晚的，往后站吧！

那有的人不愿意了，我们的战队顺序我们要自己商量。约定一个值，order吧，谁分到的值约高，谁往后站，0是老大

left:个性展示 right:体制内规则

这个就牛逼了啊，随意调配每个元素的位置，我不想站这了，更改小数字，调下位置，好像小学考试调位置

规则2. 所占空间大小占比flex-grow, flex-shrink

有的人觉得我有点胖，我要多一点空间，太挤了，好吧，自我膨胀吧,给你这个权利: flex-grow设置高一点，其它兄弟看到会给你腾位置的

left:展示了自我膨胀，right:正常生长

同理，我瘦，我想主动减少我的位置，就是这么任性！

left: 我好瘦啊，位置给你吧 right: 正常生长

这个shrink看来就是牺牲自我，成全他人， grow就是我就要爽，你么辛苦点

至于flex-basis这个有点绕，不考虑每个元素的自我grow和shrink, 父容器宽度去掉子元素空白元素（比如该元素内容就撑开10px,我给你给这个元素预留10px, 就可以通过flex-basis来设置，）就，所以就是去掉每个元素预留的空间外，取值为extra, extra再按照grow比列给每个元素分每个元素内容可以占多少，如果没设置grow,则为1，平均分，最终渲染到页面上每个元素的宽度=basis + extra*(grow+grow)/n

可参考：flex和flex:1的含义 - 朱帅 - 博客园

后续： flex:1 等价于flex-grow:1, flex-shrink:1(感觉没啥用，在实现两栏布局的时候)，flex:basis:0%.其实实验测试只要flex-grow:1即可，自动填充剩余空间。当然，如果两个元素都设置flex-grow就不行了，这就产生竞争关系了，凭什么让你占完，就是这样。如果你不设置，我设置了flex-grow:1, 不好意思，剩下的空间我全要了，谢谢哈。^^

这就是 flex暂时先到这， 后续想到新的再来更新，这就是系列第一季我来了！