在 flex 主轴方向不换行布局时，我们可以通过内部布局元素的缩放属性来控制他们占据的空间，控制元素缩放在日常布局中是一个必备的技能。
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。
如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="flexBox">
<div class="item">项目1</div>
<div class="item" style="flex-grow:1;">项目2</div>
<div class="item" style="flex-grow:2;">项目3</div>
</div>
<style type="text/css">
.flexBox{
display:flex;
flex-direction:row;
width:900px;
background:#F8F8F8;
padding:10px;
box-sizing:border-box;
justify-content:space-between;
}
.item{
background-color:aquamarine;
width:100px; height:100px;
text-align:center;
line-height:100px;
margin:8px;
}
</style>
</body>
</html>flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果设置此属性为 0 代表元素不会被缩小。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="flexBox">
<div class="item" style="flex-shrink:0;">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目3</div>
</div>
<style type="text/css">
.flexBox{
display:flex;
flex-direction:row;
width:900px;
background:#F8F8F8;
padding:10px;
box-sizing:border-box;
justify-content:space-between;
}
.item{
background-color:aquamarine;
width:300px; height:100px;
text-align:center;
line-height:100px;
margin:8px;
}
</style>
</body>
</html>flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
.item {flex-basis: <length> | auto; /* default auto */}它可以设为跟 width 或 height 属性一样的值（比如500px），则项目将占据固定空间。
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto，后两个属性可选。
如 :
.flexDemo{flex:0 0 auto;}