11.6 flex子元素设置
flex子元素设置包括：flex-grow、flex-shrink、flex-basis、flex、order。
11.6.1 伸缩属性flex-grow与flex-shrink简介
flex-grow与flex-shrink用于设置flex子元素。当容器宽度等于各列宽度之和，没有伸缩。
1、列的伸长
现在加大容器宽度，大于各列宽度和；只设置第1列伸长，以占满容器的剩余空间。
2、列的收缩
现在减小容器宽度，小于各列宽度和；只设置第1列收缩，以占满容器的“负”剩余空间。
3、伸缩默认值
属性flex-grow设置伸长系数。默认值0，表示不会伸长。
属性flex-shink设置收缩系数。默认值1，表示可以收缩。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
*{
box-sizing: border-box;
}
.parent{
display: flex;
border: 1px solid #666;
}
[class^="col"]{
width: 200px;
flex-shrink: 1;
flex-grow: 1;
}
.col1{
background-color: #0aaa76;
}
.col2{
background-color: #4aa6fc;
}
.col3{
background-color: #ed7d31;
height: 80px;
}
</style>
</head>
<body>
<div class="parent">
<div class="col1">
<div>第1列</div>
<div>小步教程</div>
<div>xiaobuteach.com</div>
</div>
<div class="col2">
<div>第2列</div>
</div>
<div class="col3">
<div>第3列</div>
<div>每列可继续加入复杂布局</div>
</div>
</div>
</body>
</html>
flex-shrink: 1与flex-grow: 1设置各列可以伸长、可以收缩。
（1）列的伸长效果。调整窗口宽度使parent宽度超过600px，剩余宽度分配到各列。
开发者工具选中第1列，显示右箭头表示伸长，宽度从200px伸长为227px。
（2）列的收缩效果。调整窗口宽度使parent宽度小于600px，负值剩余宽度分配到各列。
开发者工具选中第1列，显示左箭头表示收缩，宽度从200px收缩为160px。
试一试。将flex-shrink、flex-grow分别设值0或其它正值，查看伸长与收缩效果。
11.6.2 flex-basis
属性flex-basis设置flex子元素在主轴的初始大小，属于响应式属性。如果直接设置flex-basis数值，当flex-direction默认值row时，它取代width属性；当flex-direction: column，它取代height属性。因为实际项目大多场景没有这种需求，所以通常不直接在flex-basis设置数值，而是使用默认值auto表示采用width或height的设置值。
flex子元素宽度的计算。当flex-direction: column，如果同时设置flex-basis与width数值，则采用flex-basis，width设置无效；如果flex-basis使用默认值auto，表示采用width；如果没有设置width，则采用内部内容宽度。
“11.5.2 垂直排列应用于响应式布局”示例调整代码如下，同时添加flex-basis属性。
[class^="col"]{
width: 150px;
flex-basis: 160px;
}
运行效果说明。窗口宽度大于500px时，各列宽度160px。窗口宽度小于等于500px时，每行高度160px，宽度150px。
flex子元素实际宽度可能相应伸缩，伸缩的计算依据包括：容器设置与宽度，各子元素的flex-grow、flex-shrink、flex-basis、width等。
11.6.3 复合属性flex
属性flex是复合属性，对应flex-grow、flex-shrink、flex-basis三个值，flex默认值0 1 auto。
flex属性常见值如下。
（1）flex: 0 0 auto表示完全不进行伸缩。
（2）flex: 1 1 auto表示可以伸长且可以收缩。
[class^="col"]{
width: 200px;
flex-shrink: 1;
flex-grow: 1;
}
等价复合属性flex代码
[class^="col"]{
width: 200px;
flex: 1 1 auto ;
}
flex子元素设置更多内容见第8节。
