div+flex移动端布局

移动端布局

1.我们要进行移动端页面的开发设计第一肯定想到的是弹性盒子
2.弹性盒子flex
3.div和flex的配合使用

移动端页面

1.移动端需要引入一个样式,meta
随便打开一个网站F12调成手机模式,复制meta
2.弹性盒子
一个div设置了display: flex; 就成了一个弹性盒子
因此我们把移动端界面布局称为div+flex布局

flex水平和垂直对齐方式



    
    
    
    Document
    


    
  • 1
  • 2
  • 3
  • 4
inline-flex行内弹性盒子



    
    
    
    Document
    


    

inline-flex用法和flex一样

行内弹性盒子
flex-grow剩余空间分配方式

1.平均分配




    
    
    
    Document
    


    

1

2

3

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




    
    
    
    Document
    


    

1

2

3

3.按需求分配




    
    
    
    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

你可能感兴趣的:(div+flex移动端布局)