第2题：说一说flex : 0 1 auto 分别表示什么?

[zxdfe]

flex-grow: 放大比例，默认0；
flex-shrink:缩小比例，默认1；
flex-basis: 项目在主轴方向上的初始大小，默认auto;

flex:1 ;  ==>
flex-grow:1;
flex-shirnk:1;
flex-basis:0%;

[z-forever-y]

flex-grow:放大比例，默认是0，代表着不放大
flex-shrink: 缩小比例，默认是1，当子项目内容超过父盒子容器时，会自动缩小到和父盒子一样的大小
flex-basis: 项目在主轴上的初始大小，默认为auto 

[rupoly]

flex-grow：如果有剩余空间，子项的放大比例，默认为0，不放大
flex-shrink：如果子项比父级大，子项的缩小比例，默认为1，缩小为父级大小
flex-basis：子项在主轴上的初始大小，默认为auto，自身大小

[Moooodena]

flex : 1是flex-grow : 1;flex-shrink : 1;flex- basis : 0的缩写，分别代表剩余空间的放大比例；父级空间不足，子级的缩小比例；设置flex的元素在主轴上的初始大小，如果它有宽高，auto就代表它本身的大小，它比单独设置的宽高优先级更高；

[lemon-912]

flex-grow:代表放大比例 默认是0，不放大
flex-shrink：代表缩小比例，默认是1 如果子元素超出父盒子就会把子元素缩小和父盒子一样大小
flex-basis:子元素在主轴上的初始大小，默认是auto 子元素本身的大小

[naVuppe]

• flex-grow：代表放大比例，默认为0
• flex-shrink：代表缩小比例，默认为1
• flex-basis：代表元素在主轴上的初始大小，默认是元素本身大小

[DengZhaoQuan]

1. flex-grow: 0 项目在主轴上的放大比例，0表示不放大
2. flex-shrink: 1 项目在主轴方向的收缩比例。1 表示超出空间全部收缩（不会超出容器了）
3. flex-basis: auto 项目在主轴上的初始大小。auto是项目本身大小

[BlueSky-Engineer]

flex-grow：0：表示属性定义项目的放大比例，默认为0，如果存在剩余空间也不放大。

flex-shrink:1：表示属性定义了项目的缩小比例，默认为1，如果空间不足，该项目将缩小。

flex-basic:auto：表示属性定义了在分配多余空间之前，项目占据的主轴空间。

[Sophora77]

flex : 0 1 auto 分别表示flex-grow 、 flex-shrink、 flex-basis 的默认值，其中flex-grow 扩展比例，默认为0 ， 表示这个子项不占用剩余空间。flex-shrink 是收缩比例，默认值为1， 表示flex容器空间不足时，元素的收缩比例。flex-basis 默认值auto， 指定的是flex元素在主轴方向的初始大小。

flex：1 表示三个属性的值分别是1，1，0%。

[WLNCJL]

flex: 0 1 auto;
flex-grow: 表示放大比例，默认为0
fiex-shrink: 表示缩小比例，默认为1
flex-basis: 项目在主轴方向上的初始大小，默认为auto
flex: 1   表示  1 1 0%

[xcop32221]

• flex：grow，shrink，basis简写

  ⭐⭐⭐

  • flex:initial【默认值】
    1. 代表的是 flex:0 1 auto
    2. item在有剩余空间时其尺寸不会增长，在flex容器尺寸不足时尺寸会收缩变小（flex-shrink:1），同时当前应用flex:initial的元素的尺寸自适应于内容（flex-basis:auto）
  • flex:1
    1. 代表的是 flex:1,1,0%
    2. 不够该item的宽度是多少，都按照grow放大至占满整个空白空间；如果超出，按照shrink缩小
  • flex:0
    1. 代表的是 flex:0,1,0%
    2. item尺寸不会弹性增大,但是会弹性收缩,宽度表现为最小内容宽度
  • flex:auto
    1. 代表的是 flex:1,1,auto
    2. item尺寸可以弹性增大，也可以弹性减小，在容器尺寸不足时会优先最大化内容尺寸。
  • flex:none
    1. 代表的是 flex:0,0,auto
    2. item没有弹性，基础尺寸由内容决定

[chenjiefe]

• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

• flex:1和flex:auto flex:1等同于设置flex: 1 1 0%。 flex:auto等同于设置flex: 1 1 auto。

[Qian-e]

flex-grow：即使存在剩余空间时，子项的放大比例，默认为0 flex-shrink：当父容器空间不足时，子项的缩小比例，默认值1 flex-basis：子项在主轴方向上的初始大小，默认值auto

[NeoArcle]

flex:grow=0 子项的放大比例，默认为0，表示不放大 flex:shrink=1 子项的缩小比例，默认为1，表示超出容器部分按比例缩小 flex:basis=auto 子项在主轴上的初始大小，默认值为auto，表示项目本来的大小

[Cremei]

flex:0 1 auto 是默认值

• flex-grow: 0; ==> 子项保持原尺寸，不占剩余空间
• flex-shrink: 1; ==> 子项溢出容器，子项尺寸收缩为容器尺寸
• flex-basis: auto; ==> 保持flex元素在主轴方向上的初始大小（或自设宽度 > 或内容宽度）
• 口诀：剩则饱（保），溢则收，肚子自适应。
  • 有剩饭表示饱（保持原尺寸）了，吃多了（溢）要克制（收），肚子就能适应

三个属性的含义
1.flex-grow 当flex父容器尺寸  >  子项总尺寸，即flex容器有剩余空间时考虑
    *默认为0,表示这个item不占用剩余空间
    小于1，按照剩余空间的比例占：剩余空间*0.5 < 1=等于1，刚好占满剩余空间 < 大于1，占满剩余空间
2.flex-shrink：当flex容器尺寸  <  子项总尺寸， 即flex容器尺寸不足以容纳子项时处理父元素空间不足时,子元素的收缩比例
    0表示不收缩,按正常宽度渲染 <  0.5: 超出的是100px的话,就收缩=100px*0.5=50px < 1是默认值,收缩到为父容器的宽度
3.flex-basis 指定了flex元素在主轴方向上的初始大小
* 优先级 > 单独设置的宽高
    默认值为auto  看子项宽度：子项有宽度按其宽度计算，子项没宽度以其内容为宽度 （留宽，无宽看内容）
    设置为0%时    忽略子项宽度：有内容以内容为宽，没内容没宽 （忽略宽度，不忽略内容）