上篇系统介绍了flex的语法及基本知识，如果您还不熟悉flex知识，点击这里先看看《 前端入门——弹性布局（Flex）》。本篇将结合flex基本知识去实现常见的网页布局效果，常见的经典网页布局有：

上下结构，头部高度固定，下部区域高度自适应。

上下结构

html：

  
header
  
content

css：

main{
  width:100%;
  height:100vh;
  display:flex;
  flex-direction: column;
}
main > header{
  height: 100px;
  background: #cdf0fd;
}
main > section{
  flex-grow:1;
}

左右结构，左边宽度固定，右边区域宽度自适应。

左右结构

html：

  
  
content

css：

main{
  width:100%;
  height:100vh;
  display:flex;
}
main > nav{
  width:150px;
  background: #cdf0fd;
}
main > section{
  flex-grow:1;
}

上中下结构，头部和底部高度固定，中间区域高度自适应。

上中下结构

html：

header
content

css：

main{
  width:100%;
  height:100vh;
  display:flex;
  flex-direction: column;
}
main > header,
main > footer{
    height: 100px;
    background: #cdf0fd;
  }
main > section{
  flex-grow:1;
}

左中右结构，左边和右边宽度固定，中间区域宽度自适应。

左中右结构

html：

content

css：

main{
  width:100%;
  height:100vh;
  display:flex;
}
main > nav,
main > aside{
    width:150px;
    background: #cdf0fd;
  }
main > section{
  flex-grow:1;
}

圣杯布局，就是中间区域再嵌套其它结构。

1、上中下结构里，中间区域嵌套左中右结构

圣杯布局1

html：

 
header

   
    
    
content
    

css：

main{
  width:100%;
  height:100vh;
  display:flex;
  flex-direction: column;
}
main > header,
  main > footer{
    height: 100px;
    background: #cdf0fd;
  }
main > section{
  flex-grow:1;
  display:flex;
}
/*嵌套的左中右结构*/
main > section > nav,
main > section > aside{
    width:150px;
    background: #fdcdcd;
 }
main > section > section{
  width:100%;
  flex-grow:1;
}

2、左中右结构里，中间区域嵌套上中下结构

圣杯布局2

html：

  
  

    
      
header
      
content
      
  
	

css：

 main{
   width:100%;
   height:100vh;
   display:flex;
 }
main > nav,
main > aside{
    width:150px;
    background: #cdf0fd;
  }
main > section{
  flex-grow:1;
  width:100%;
  display:flex;
  flex-direction: column;
}
/*嵌套的上中下结构*/
main > section > header,
main > section > footer{
    height: 100px;
    background: #fdcdcd;
  }
main > section > section{
  flex-grow:1;
}

9宫格布局

9宫格

html：

        
content 1 
        
content 2 
        
content 3 
        
content 4 
        
content 5 
        
content 6 
        
content 7 
        
content 8 
        
content 9 
    

css：

 main{
   width:100%;
   height:100vh;
   display:flex;
   flex-wrap: wrap;
 }
main > section{
  width: 30%;
  background:#55ff00;
  margin: 1.5%;
}

总结

以上是常见的经典布局，在这些布局的基础上可以组合、拆分制作各种各样的布局，如果结合position:fixed定位还可以实现头部或侧边栏固定的布局效果。

以上布局使用传统的float、position也可以实现，只是相对来说比较麻烦一些，已不建议使用，所以了解下就可以了。

虽然flex可以满足大部分布局，但是flex并不擅长栅格布局，后面会介绍display:grid（网格布局），网格是一组相交的水平线和垂直线，它定义了网格的列和行。所以使用网格布局能够构建更加复杂的网页设计。

感谢关注，希望能够给你有所帮助，欢迎提出错误，补充。

---

上篇：前端入门——弹性布局（Flex）

下篇：前端入门 —— 网格布局（Grid）

---

源码链接: https://pan.baidu.com/s/1bdZM8ZcdU3FdSCp2u0sx8A?pwd=9ub2
提取码: 9ub2