flex布局常用属性（flex 布局中子元素设置宽度无效的解决办法）

因为父元素设置了【display: flex】所以该父元素下所有的子元素都会默认加上【flex: 0 1 auto】
    
    
    
    
。

其中 1 就是 flex 中的 flex-shrink 属性    
    
    
    
    ，表示开启元素的收缩功能 


     


     


     


     


，所以子元素宽度才会失效     


     


     


     


    。

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间 




 




 




 




 


。

flex 属性是 flex-grow    
    
    
    
    、flex-shrink 和 flex-basis 属性的简写属性

   

   

   

   

。

注意：如果元素不是弹性盒模型对象的子元素

 




 




 




 




，则 flex 属性不起作用     

     

     

     

   。

默认值：0 1 auto

值 描述 flex-grow 一个数字   

   

   

   

   ，规定项目将相对于其他灵活的项目进行扩展的量  




  




  




  




  

。 flex-shrink 一个数字  

     

     

     

     

，规定项目将相对于其他灵活的项目进行收缩的量


  


  


  


  


。 flex-basis 项目的长度     
     
     
     
  。合法值："auto" 


     


     


     


     


、"inherit" 或一个后跟 "%"

 




 




 




 




、"px"   

   

   

   

   、"em" 或任何其他长度单位的数字   




   




   




   




   
。 auto 与 1 1 auto 相同



 



 



 



 



。 none 与 0 0 auto 相同                     。 initial 设置该属性为它的默认值


  




  




  




  




，即为 0 1 auto    




    




    




    




    。请参阅 initial
























。 inherit 从父元素继承该属性                    。请参阅 inherit     



     



     



     



     。

解决方案

方案1

flex: 0 0 auto; width: 200px;

方案2

flex: 0 0 200px;

方案3（推荐）

flex-shrink: 0; width: 200px;

方案4

min-width: 200px;