70 : 140 : 210 = 1 : 2 : 3，与flex shrink的值成反比。实际上压缩率和flex item的初始尺寸也有关系，只不过当初始尺寸一样时它带来的影响被忽略了。假设flex shrink为
fs，flex item的初始尺寸为
is，flex item被压缩的尺寸为
ss，则正确的表达式为：
fs ∝ is/ss3. Flex Basis
flex-basis用于设置flex item的初始宽/高。为什么有width和height还需要重新加一个flex-basis呢？flex-basis和width/height有如下的区别：
flex-basis只能用于flex-item，而width/height可以应用于其他类型的元素；
flex-basis和flex-direction有关，当flex-direction为row的时，flex-basis设置的是宽度，当flex-direction为column时，flex-basis设置的是高度；
当flex item被绝对定位后（absolute position），flex-basis不起作用，而width/height可以；
flex-basis可以用于flex的简写形式，如：flex: 1 0 200px;
我们来看一下flex-basis的作用，将css修改如下：
.box{
height: 100px;
flex-grow: 1;
}
.one{
background: pink;
flex-basis: 100px;
}
.two{
background: lightgreen;
flex-basis: 200px;
}
.three{
background: skyblue;
flex-basis: 300px;
}3个flex item都在原来的初始宽度基础上增加了相同的宽度：
当然，这个例子如果换成使用
width也是一样的效果，但是虽然效果一样但意义不一样，所以使用flex布局时还是应该尽量遵守规范，选合适的人去干正确的事。4. Order
通过
order属性我们可以改变flex item的排列顺序，例如：html:
<section id="blocks">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</section>css：
#blocks{
display: flex;
margin: 10px;
justify-content: space-between;
}#blocks div{
flex: 0 0 100px;
padding: 40px 0;
text-align: center;
background: #ccc;
}
默认排列顺序是按照flex item在html中的出现顺序：
