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

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

html：

<main>
  <header>header</header>
  <section>content</section>
</main>

css：

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

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

html：

<main>
  <nav>left nav</nav>
  <section>content</section>
</main>

css：

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

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

html：

<main>
<header>header</header>
<section>content</section>
<footer>footer</footer>
</main>

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：

<main>
<nav>left nav</nav>
<section>content</section>
<aside>right aside</aside>
</main>

css：

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

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

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

html：

<main>
 <header>header</header>
<section>
   <!--嵌套左中右结构-->
    <nav>left nav</nav>
    <section>content</section>
    <aside>right aside</aside>
</section>
<footer>footer</footer>
</main>

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、左中右结构里，中间区域嵌套上中下结构

html：

<main>
  <nav>left nav</nav>
  <section>
    <!--嵌套上中下结构-->
      <header>header</header>
      <section>content</section>
      <footer>footer</footer>
  </section>
	<aside>right aside</aside>
</main>

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宫格布局

html：

<main>
        <section>content 1 </section>
        <section>content 2 </section>
        <section>content 3 </section>
        <section>content 4 </section>
        <section>content 5 </section>
        <section>content 6 </section>
        <section>content 7 </section>
        <section>content 8 </section>
        <section>content 9 </section>
    </main>

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