1. flex基础
首先，了解弹性盒子， 弹性元素， 两条轴的概念
flex容器有两个轴， 一个主轴，一个交叉轴（垂直于主轴的轴 即为交叉轴），容器内的元素默认会按主轴方向排列。
下面先运行一下这段代码：
<body> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item last"></div> </div> </body> </html> <style> .box { width: 50vw; margin: 0 auto; background-color: mediumturquoise; display: flex; } .item { width: 50px; height: 50px; background-color: rgb(249, 27, 223); margin:5px; } </style>
这就是flex布局的默认行为：内部元素默认按照默认主轴的方向排列（元素的间距是我自己设定的margin，没有margin他们就会连在一起）
Flexbox 允许使用margin: auto 来填充弹性子元素之间的可用空间。例如，我们可以给元素添加margin: auto
item { margin: auto; }
利用这个特性，我们可以把最后一个item推到最右侧：
.item.last { margin-left: auto; }
2. flex核心
先来一波总结：
flex的核心就是“弹”，弹性元素在盒子的空间剩余时可以放大， 溢了可以 缩小。 一个弹性元素的宽度计算
刚刚我们了解了相关的flex概念，现在我们来了解一个非常重要的属性——flex。flex属性控制弹性子元素在主轴方向上的大小。 下面我们新增如下html，并让弹性元素使用flex属性来设置其大小
<!-- html --> <div class="content"> <div class="main"></div> <div class="sider"></div> </div> <!-- css --> <style> /* flex盒子 */ .content { width: 90%; margin: 0 auto; display: flex; } .main, .sider { height: 50vh; background-color: white; } .main { //第一个白色方形宽度所占比例为3/4 flex: 3; margin-right: 10px; } .sider { //第二个白色方形宽度所占比例为1/4 flex: 1; } </style>
我们设置了其为3:1的大小，弹性元素大小为（内容+ 内边框+内边距 + 外边框 + 外边距）。即若给其中一个弹性元素添加margin, 那么在计算弹性元素大小时，margin也会被计算在其中。
flex-basis属性
flex-basis属性 是用来定义弹性元素的宽度的（相当于width属性）。默认值为auto，此时，flex-basis的值为 wdith属性的值，若弹性元素没有设置width属性，那么就默认为弹性元素本身大小。flex-basis属性和width属性同时出现时， 会忽略掉width属性。 注意： flex-basis的值，为弹性元素大小（包含外边距）。 设置了基本大小之后，我们就可以放心的让弹性元素 智能缩放，来适应各盒子的大小，即可以“弹”。这时候就需要 flex-grow和 flex-shrink 来决定缩放的规则。
flex-grow属性
flex-grow属性可以用来放大单个弹性元素大小，是一个增长因子。 当flex-basis值设置好后，每个弹性元素都会占据一定宽度，加起来的宽度不一定正好填满弹性容器的宽度，可能会有留白。 多出来的留白（或剩余宽度）会按照 flex-grow（增长因子）的值分配给每个弹性子元素， flex-grow 的值为非负整数。如果一个弹性子元素的 flex-grow 值为 0，那么它的宽度不会超 过 flex-basis 的值。一图胜千言，看图：
flex-shrink属性
与flex-grow相似，只不过felx-shrink属性是用来控制弹性元素缩小的，是一个缩小因子。 计算出弹性子元素的初始主尺寸后，它 们的累加值可能会超出弹性容器的可用宽度。如果不用 flex-shrink，会导致溢出。
.item { flex-basis: 40%; flex-shrink: 0; //设置为0，则为不进行缩放 width: 200px; }
如果某个子元素为 flex-shrink: 0，则不会收缩；如果值大于 0，则会收缩至不再溢出。按照 flex-shrink 值的比例，值越大的元素收缩得越多。
flex属性
flex属性是一个简写属性，是flex-grow flex-shrink flex-basis属性的简写形式。 flex:1 1 0 相当于 flex-grow 为1， flex-shrink为1， flex-basis为0。 如果省略了其他属性，子属性的值并不会被置为初始值， flex 简写属性会给出有用的默认值：flex-grow 为 1、flex-shrink为 1、flex-basis 为 0%。这些默认值正是大多数情况下所需要的值。
所以，平常我们写的flex: 1即设置了flex-grow为1， flex-shrink为1，flex-basis为0。基础值为0（大家初始宽度都一样大，且为0），那么剩下的全都是剩余的空间，每个元素都会按照相同的比例调整自己的宽度（基础值 + 分配的剩余宽度）。
注意：flex: 33.6% --> flex-grow:1, flex-shrink:1, flex-basis: 33.6%.
3. flex对齐
flex 提供了许多强大的对齐方式，让内部弹性元素按照规则对齐（例如居中对齐） 详细对齐效果见
justify-content属性
这个属性用来控制主轴方向的元素对齐方式：flex-start、flex-end、center、space-between。
align-items
这个属性用来控制副轴的对齐方式。大致取值及效果如下图：
aligin-self
这个属性是放在弹性子元素的身上的。 它可以单独给弹性子元素设置副轴上的对齐方式，覆盖掉原来的aligin-items属性。
