首页 > 代码库 > flex属性设置

flex属性设置

flex是一个复合属性,所以有三个值设置,这也就造成了flex可以只设置一个值或两个值:

如果flex只设置一个值:

  • 没有单位的数,则这个值是flex-grow, 并且flex-basis变为0
  • 有单位的数,比如px或em,则这个值是flex-basis
  • 关键字,auto或者none或者content,则三个值都有各自相应变化

如果flex只设置两个值,则第一个值必须是没有单位的数,并且会被解释为flex-grow,对于第二个值:

  • 没有单位的数,则这个值是flex-shrink, 并且flex-basis变为0
  • 有单位的数,比如px或em,则这个值是flex-basis

根据上面的规则就很容易知道下面的四种快捷取值:

/* flex: 1 1 0; */
flex: 1;   
/* item会被放大或缩小至充满父容器,如果所有的item的flex都被设置为1,
则无视item的原来在主轴上的长度,而统一被设置为相等
*/ /* flex: 1 1 auto; */ flex: auto; /* item会被放大或缩小至充满父容器,如果所有的item的flex都被设置为auto,
则根据item的原来在主轴上的长度,按比例放大,但缩小相同的长度,
这是由于flex-grow和flex-shrink的计算方式不同导致,不在此讨论
*/ /*flex: 0 1 0; */ flex: 0; /* item缩至最小,如果所有的item的flex都被设置为0,则无视item的原来在主轴上的长度,而统一缩至最小*/ /* flex: 0 0 auto; */ flex: none; /* 不放大不缩小,即使所有的item在主轴上的长度之和会超出父容器也不会缩小 */

最后要注意的一点是flex item元素的float clear vertical-align会失效!!

flex属性设置