flex是Flex项目属性是flex-grow、flex-shrink和flex-basis属性的简写。关于Flexbox弹性布局推荐阅读：拥抱Flexbox弹性布局基本概念之Flex容器、拥抱Flexbox弹性布局基本概念之Flex项目。
我们开始，假设您希望将图像和一些文本彼此对齐，如下所示：
.container {
display: flex;
}
img {
width: 50px;
margin-right: 20px;
}Chrome浏览中没毛病，但在firefox浏览中图像宽度值并不像我们想像中的宽度。
您可能意识到需要使用flex-shrink属性来告诉flex项不要减小大小，不管它们是否有宽度。所有我们需要将image元素flex-shrink弹性收缩设置为0。
.container {
font-family: Helvetica, sans-serif;
display: flex;
max-width: 500px;
}
img {
width: 50px;
margin-right: 20px;
flex-shrink: 0;
}进一步优化使用flex属性
flex属性是flex-grow、flex-shrink和flex-basis属性的简写。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex-grow
- 用来指定Flex项目相对Flex容器空间的放大比例。
- 其值可以是0或者大于0的任何正数。
- 默认值：0（表示Flex项目不会自动填充Flex容器可用空间）。
flex-shrink
- 控制Flex项目相对Flex容器没有额外空间时如何缩小，其收缩的大小是依据flex-shrink的值来确定。
- 默认情况下，所有Flex项目都可以收缩，但如果将它们设置为0时，他们不会缩小会保持原来的大小。
- 默认值：1(Flex项目在必要时会缩小)。
flex-basis
- 可以指定Flex项目的初始大小。也就是flex-grow和flex-shrink属性调整它的大小以适应Flex容器之前的Flex项目大小。
- flex-basis属性值比主轴长度属性值优先级高：
- flex-direction:row时，flex-basis属性作用与width属性相同，但比width优先级要高；
- flex-direction:column时，flex-basis属性作用与height属性相同，但比height优先级要高；
- flex-basis可以取任何用于主轴长度属性的任何值。比如 % || em || rem || px等。重点一定要加单位，即flex-basis: 0px不能写成flex-basis:0。
- 默认值：auto(初始宽度计算是基于内容的大小)。
我们可以将flex-shrink值设置为0和flex-basis设置为图像的默认宽度值，这样我们就可以省略掉图像的width属性。
.container {
font-family: Helvetica, sans-serif;
display: flex;
max-width: 500px;
}
img {
flex: 0 0 50px;
margin-right: 20px;
}
另一个例子
构建一个导航组件，让用户可以左右滚动多个项目。
nav {
margin-bottom: 20px;
width: 600px;
display: flex;
overflow-x: scroll;
font-size: 18px;
}
a {
color: black;
text-decoration: none;
padding: 10px 20px;
border-bottom: 2px solid #ddd;
&:hover {
color: red;
}
}结果是这样的：
发现导航项目中有一个项目内容出现多行，此时您会很自然地想到给导航中的每个项目设置flex-shrink属性为0告诉项目不缩小：
.shrink a {
flex-shrink: 0;
}
进一步优化使用flex属性
这次flex-shrink设置为0，那么flex-basis设置为什么呢，auto。flex-basis默认值就是auto(初始宽度计算是基于内容的大小)。
.shrink a {
flex: 0 0 auto;
}
