flex弹性盒子核心知识点

flex水平和垂直对齐方式




    
    
    
    Document
    



    
  • 1
  • 2
  • 3
  • 4

inline-flex




    
    
    
    Document
    


    

inline-flex用法和flex一样

行内弹性盒子

flex-grow 剩余空间分配方式

  1. 平均分配



    
    
    
    Document
    


    

1

2

3

  1. 某一个子元素占据全部剩余空间



    
    
    
    Document
    


    

1

2

3

  1. 按需分配



    
    
    
    Document
    


    

1

2

3

flex-direction 盒子排列方向




    
    
    
    Document
    


    

1

2

3

盒子换行设置




    
    
    
    Document
    



    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

你可能感兴趣的:(flex弹性盒子核心知识点)