flex布局中的flex---->flex-grow、flex-shrink、flex-basic的缩写
flex:none ----->flex:0 0 auto
flex:auto ----->flex:1 1 auto
假设以上三个属性同样取默认值，则flex的默认值为0 1 auto。
1.flex取三个值时，
.item {flex: 2333 3222 234px;}
.item {
flex-grow: 2333;
flex-shrink: 3222;
flex-basis: 234px;
}
2.flex取值为非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
3.flex取值为长度或者百分比时，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
4.flex取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
5.当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1
.item {flex: 2333 3222px;}
.item {
flex-grow: 2333;
flex-shrink: 1;
flex-basis: 3222px;
}
flex-basic的取值范围取决于：box-sizing
-
auto：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。
-
content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
-
百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.parent {
width:600px;
display: flex;
}
.parent>div {
height: 100px;
}
.item-1 {
width: 100px;
flex: 2 1 40%;
background: blue;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: red;
}
.item-3 {
flex: 1 1 200px;
background: lightblue;
}
</style>
</head>
<body>
<!-- 子元素的总基准：600*40%+100+200=540 -->
<!-- 剩余空间：600-540=60 -->
<!-- item1的宽度：60*2/5+600*40%=264 -->
<!-- item2的宽度：60*2/5+100=124 -->
<!-- item3的宽度：60*1/5+200=212 -->
<div class="parent">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
</body>
</html>