CSS flex 篇 #6
Description
在我写代码到现在用的很多的就是flex啦~
下面听我细细来说说flex，如果有讲的不对的，请各位大佬提出来~
回顾一下flex嘻嘻嘻~
Flex 的基本概念
在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。
在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。
这里需要强调，不能先入为主认为宽度就是 main size，高度就是 cross size，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是 main size。
Flex 容器：
flex布局发生在父容器和子容器之间。父容器需要有flex的环境(display:flex;)，子容器才能根据自身的属性来布局，简单的说，就是瓜分父容器的空间。相反就是说如果父容器没有flex的环境，那么子容器就无法使用flex的规则来划分父容器的空间
.container {
display: flex | inline-flex; //可以有两种取值
}
分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。
需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。
flex一共可以设置6种属性：
-
flex-direction: 决定主轴的方向(即项目的排列方向)，
有4个值可以选择：row | row-reverse | column | column-reverse
默认值：row，主轴为水平方向，起点在左端。（需要两个块状元素在同一行我都会想到这个）
row-reverse：主轴为水平方向，起点在右端 。
column：主轴为垂直方向，起点在上沿 。(许多时候又要用Flex，又不希望他并排的时候经常用到这个属性。）
column-reverse：主轴为垂直方向，起点在下沿。 -
flex-wrap: 决定容器内项目是否可换行。
默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
wrap：项目主轴总尺寸超出容器时换行，第一行在上方
wrap-reverse：换行，第一行在下方 -
justify-content：定义了项目在主轴的对齐方式。
默认值: flex-start 左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。 -
align-items: 定义了项目在交叉轴上的对齐方式
flex-start：交叉轴的起点对齐（一般我会理解上对齐）
flex-end：交叉轴的终点对齐（下对齐）
center：交叉轴的中点对齐（居中）
baseline: 项目的第一行文字的基线对齐（emmmm，没用过）
进入正题：
在写项目的时候，经常写到flex:1(设置在子项，数值表示占据剩余空间的份数)
flex 属性，是以下三个属性的简写，即 flex:0 1 auto;
flex-grow:0; 定义弹性盒子项的拉伸因子，即子项分配父项剩余空间的比，默认值为 0
flex-shrink:1; 指定了 flex 元素的收缩规则，子项的收缩所占的份数，默认值为1 [ 当所有子项相加的宽度大于父项的宽度，每个子项减少的多出的父项宽度的 1/n ]
felx-basis:auto; 指定了 flex 元素在主轴方向上的初始大小，即子项的宽度
举个🌰：
flex-grow：就是索取父容器的剩余空间，默认值是0，就是三个子容器都不索取剩余空间。但是当B1设置为1的时候，剩余空间就会被分成一份，然后都给了B1。 如果此时B2设置了flex-grow:2，那么说明B2也参与到瓜分剩余空间中来，并且他是占据了剩余空间中的2份，那么此时父容器就会把剩余空间分为3份，然后1份给到B1，2份给到B2。（感觉就是按比例分配~）
flex-basis (default:auto) 初次见flex-basis这个属性，还挺疑惑的，不知道它是用来干嘛的。 后来研究发发现，这个属性值的作用也就是width的替代品。 如果子容器设置了flex-basis或者width，那么在分配空间之前，他们会先跟父容器预约这么多的空间，然后剩下的才是归入到剩余空间，然后父容器再把剩余空间分配给设置了flex-grow的容器。 如果同时设置flex-basis和width，那么width属性会被覆盖，也就是说flex-basis的优先级比width高。有一点需要注意，如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高（先减去再分配~）
参考的链接地址：
http://zhoon.github.io/css3/2014/08/23/flex.html
https://zhuanlan.zhihu.com/p/25303493