学习flex布局用的最多的就是用flex-direction justify-content align-items这些来对div进行位置摆放，曾一度以为这便是大家口中flex的强大之处。对于flex容器内部的flex子项布局，几乎从未关注过。最近对flex属性仔细学习了一番，重点关注了flex-grow flex-shrink flex-basis这三个属性用法。因此记录下。

flex属性

首先，对flex-grow flex-shrink flex-basis这三个属性进行解释：
flex-grow ：当flex容器剩余空间足够时，定义了flex子项按什么比例去“瓜分”flex容器剩余空间。
flex-shrink ：当flex容器剩余空间不够时，定义flex子项按什么比例“割让”自己的空间。
flex-basis：定义flex子项的初始大小。（主轴方向上）

flex属性简写

我觉得css简写一直是一个难记的地方。flex也不例外。
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

  1. /* 1个值，flex-grow */
  2. flex: 1;        其他默认值(flex-shrink: 1, flex-basis: 0%)
  3. /* 1个值，flex-basis */
  4. flex: 100px;    其他默认值(flex-grow: 1, flex-shrink: 1)
  5. /* 2个值，flex-grow和flex-basis */
  6. flex: 1 100px;  其他默认值(flex-shrink: 0)
  7. /* 2个值，flex-grow和flex-shrink */
  8. flex: 1 1;      其他默认值(flex-basis: 0%)
  9. /* 3个值 */
  10. flex: 1 1 100px;

关于一些特定符号简写说明：

  1. flex: inital (0 1 auto)
  2. flex: auto   (1 1 auto)
  3. flex: none   (0 0 auto)

参照一个例子就很好理解，
有五个div在一行依次排开，现在有如下要求：

  1. div1、div2、div3初始100px宽度，div4、div5最少20px。
  2. 当容器空间富足时，div1、div2、div3宽度不变，div4、div5抢占多余空间，按照比例3：2。
  3. 当容器控件不够时，div1、div2、div3按照2：1：1比例压缩自身空间，div4、div5固定20px。

直接上代码：

  1. <div class="container">
  2.     <item clas="div1">div1</item>
  3.     <item clas="div2">div2</item>
  4.     <item clas="div3">div3</item>
  5.     <item clas="div4">div4</item>
  6.     <item clas="div5">div5</item>
  7. </div>
  1. .container {
  2.     display: flex;  
  3. }
  4. .div1 {
  5.     flex: 0 2 100px;    
  6. }
  7. .div2,
  8. .div3 {
  9.     flex: 0 1 100px;    
  10. }
  11. .div4 {
  12.     flex: 3 0 20px;    
  13. }
  14. .div5 {
  15.     flex: 2 0 20px;    
  16. }