flex—direction（flex这些问题应该被理解）

flex三连问    
    
    
  ，帮助我们更好的理解布局利器

问题：

flex的值 auto, none, 0, 1, initial分别是什么？有什么作用？有什么表现？ flex-basis和width的区别？单值flex-basis：0与auto的区别？flex-basis：100px与width：100px一样吗？ 怎样理解剩余空间？

解决：

问题一：

flex的值 auto, none, 0, 1, initial分别是什么？

flex: auto 为 1 1 auto

flex: none为 0 0 auto

flex: 0为 0 1 0

flex: 1为 1 1 0

flex: initial为 0 1 auto

提一嘴   


     


     


     
，我认为重要的是这个flex的默认值



 




 




 




，也就是initial    
    
    
  。因为多数情况   

   

   

 ，我们都是在默认值上修改    

     

     

     ，其他再不容易记的东西




  




  




  




，也会有了参照而变得游刃有余   


     


     


     
。

上述五种情况的作用及表现什么？

flex：initial（默认值）

父盒子设置为弹性盒  


  


  


，子元素默认就为initial     
     
     
     ，一般用于还原默认值

表现为不会随之增大




   




   




   



，会随之减小
 



 



 



，宽度参照自身

flex：1

一般用于等分（分配剩余空间后                   ，表现为等分）

表现为会随之增大 




    




    




    


，会随之减小
















，宽度内容区最小宽度（分配剩余空间前）

flex：0

不常用

表现为不会随之增大                  ，会随之减小  



     



     



     

，宽度内容区最小宽度（分配剩余空间后）

flex：auto

一般用于文字越长

















，元素越宽的场景

表现为会随之增大    
    
    
  ，会随之减小   


     


     


     
，宽度参照自身

flex：none

一般用于保持元素自身宽度



 




 




 




，且文字不换行

表现为不会随之增大   

   

   

 ，不会随之减小    

     

     

     ，宽度参照自身

问题二：

flex-basis和width的区别？单值flex-basis：0与auto的区别？

两者都是用于改变弹性盒元素的宽度

flex-basis比width优先级更高；

如果flex-basis为auto




  




  




  




，那么元素就会参照width

如果flex-basis不为auto（如：0  


  


  


，200px等）     
     
     
     ，那么元素就会忽略width（即使你设置了width）




   




   




   



，采用flex-basis的值

flex-basis：100px与width：100px（弹性盒可缩减为前提条件）一样吗？

首先说结论
 



 



 



，不一样！！！

width：100px + flex-basis：auto === 元素100px content + flex-basis：100px === max（content                   ， flex-basis：100px） >= 元素100px

剖析一下 




    




    




    


，有以下两种情况：

元素flex-basis为auto时
















，width设为100px                  ，那么当缩小弹性盒时  



     



     



     

，元素始终为100px

















，不会变化



 




 




 




。那么如果该元素内容区宽度超过100px（比如内嵌的图片    
    
    
  ，font-size大小等）   


     


     


     
，那么也不会撑大该元素



 




 




 




，它就是个定值100px

元素flex-basis不为auto时   

   

   

 ，width设为多少都没用    

     

     

     ，优先取flex-basis的值   

   

   

 。若flex-basis为100px




  




  




  




，那么如果该元素内容区宽度超过100px（比如内嵌的图片  


  


  


，font-size大小等）     
     
     
     ，那么与设置width结果相反




   




   




   



，会撑大该元素
 



 



 



，最后计算的宽度会大于100px    

     

     

     。

width就是写死                   ，无论怎么变 




    




    




    


，该元素就是这么宽；flex-basis意思是
















，元素大概是这么宽                  ，如果有意外情况  



     



     



     

，那么我还会改变




  




  




  




。

举个小栗子帮助理解下：你晚上在加班

















，女朋友要让你陪她一个小时    
    
    
  ，但是女人的嘴   


     


     


     
，骗人的鬼



 




 




 




，指不定耽误多长时间呢  


  


  


。然后     
     
     
     。




   




   




   



。
 



 



 



。

width的理解：我是个负责任的男人   

   

   

 ，一个小时一分不多一分不少    

     

     

     ，不会因为任何说法改变这一个小时                   。

flex-basis的理解：女朋友比任何事都重要




  




  




  




，如果她不闹腾  


  


  


，那么一个小时就准时结束     
     
     
     ，否则




   




   




   



，我只能由着她的性子来了 




    




    




    


。唉
 



 



 



，折腾到明早也有可能                   ，没办法 




    




    




    


，谁让她最重要呢？

问题三：

怎样理解剩余空间？

开启弹性盒的元素的宽度为总空间

去掉所有子元素的固定宽度后
















，剩余的空间就叫做剩余空间

子元素有width属性                  ，那么去掉width就是剩余空间

子元素有flex-basis：100px

如果100px小于总宽度  



     



     



     

，那么去掉flex-basis就是剩余空间

如果100px大于总宽度

















，那么没有剩余空间

如果缩减系数flex-shrink为0    
    
    
  ，那么元素就是100px   


     


     


     
，表现为超出父盒子

如果缩减系数flex-shrink不为0



 




 




 




，元素的最终宽度也要少于100px