flex属性设置

Posted 2020-09-23 Stephen666

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会失效！！