1.页面布局概述

网页布局方式有很多，各有各的特点：

  1. 传统的 DIV+CSS+float（浮动） 布局方式，适用于PC端。
  2. 自适应布局方式，要开发多套页面，服务器根据不同的客户端返回不同的页面。
  3. 响应式布局方式，开发一套页面，根据媒体查询返回的结果，跳转布局以适用不同的客户端。
  4. 多列布局方式，类似报纸排版的样式。
  5. 弹性布局，适用与PC端与移动端。
  6. … …

    注意：本课程中只讲解弹性布局！

2.弹性布局（弹性盒子）

一个元素的display属性值设置为flex，那么这个元素中的子元素，就会遵循弹性布局的规则。

  1. display:flex  /*flex是flexible box的缩写*/

此时，这个元素就可以称为是一个弹性布局容器（弹性容器），它内部的子元素，将只按照弹性布局的规则来排列和对齐，以前的float、clear、块状与内联、vertical-align属性都不能用了。

2.1.重要概念：主轴与侧轴

弹性布局中的一个重要概念：主轴与侧轴：
弹性盒子中默认存在两根轴，一个是水平方向的主轴，一个是垂直方向的侧轴。
06.弹性布局 - 图1

注意点：

  1. 主轴的开始位置叫做 main start、 结束位置叫做 main end；
  2. 侧轴的开始位置叫做cross start、结束位置叫做cross end；
  3. 侧轴永远垂直于主轴；

2.2.flex-direction样式

flex-direction属性就是用来设置主轴方向的。

  1. flex-direction:row        /*子元素沿主轴方向排列，也就是水平方向。 row为默认值*/
  1. flex-direction:column     /*子元素沿侧轴方向排列，也就是垂直方向。*/

一个完整的例子：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             body{
  8.                 display: flex;           /*将body设置为弹性布局*/
  9.                 flex-direction: column;  /*这里设置为侧轴方向排列*/
  10.             }
  11.             .son{
  12.                 width: 100px;
  13.                 height: 100px;
  14.                 border: solid 2px #f90;
  15.                 background-color: yellow;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div class="son">1</div>
  21.         <div class="son">2</div>
  22.         <div class="son">3</div>
  23.         <div class="son">4</div>
  24.         <div class="son">5</div>
  25.     </body>
  26. </html>

06.弹性布局 - 图2

总结：

  1. 在弹性容器中，子元素想要水平方向排列，那就在弹性盒子中设置：flex-direction:row
  2. 在弹性容器中，子元素想要垂直方向排列，那就在弹性盒子中设置：flex-direction:column
  3. 在弹性容器中，以前的“块状元素独占一行”，“内联元素不独占一行”，“元素水平排列时需要浮> 动”等等规则，一律不再有效。

2.3.flex-wrap样式

由于弹性布局中的子元素能自动伸缩，所以，当父容器此次小于子元素整体尺寸时，子元素不会自动换行，而是自动收缩。

  1. body{
  2.     display: flex;
  3. }

06.弹性布局 - 图3
那么，如果想要让子元素自动换行，可以使用flex-wrap:wrap

  1. body{
  2.     display: flex;
  3.     flex-wrap: wrap;   /*当弹性布局容器尺寸小于所以子元素尺寸时，子元素会自动换行*/
  4. }

06.弹性布局 - 图4

总结：

  1. 在弹性盒子中，默认子元素不换行，即使是容器宽度不够时，子元素也不换行，只是宽度缩小。
  2. 如果在父容器宽度不够时想要自动换行，那么设置：flex-wrap:wrap

2.4.justify-content样式

以主轴方向为例：子元素水平方向排列后，默认依次靠左排列。如果想让子元素居中、居右等，那么就可以设置justify-content样式。值有五种：

  1. flex-start（默认）：左对齐。
  2. flex-end：右对齐。
  3. center：居中。
  4. space-between：两端对齐，子元素之间间距都相等。
  5. space-around：每个子元素两侧的间距相等。所以子元素之间间距比子元素到边框 间距大一倍。

例如：

  1. body{
  2.     display: flex;
  3.     justify-content: space-between;    /*两端对齐，子元素之间间距都相等。*/
  4. }

06.弹性布局 - 图5

总结：在弹性盒子中，子元素主轴对齐方式使用justify-content来设置

2.5.align-items与align-content样式

以主轴方向为例：子元素水平方向排列后，如果想让子元素垂直居中，那么就可以设置align-items样式。常用值有三种：

  1. flex-start（默认）：上对齐。
  2. flex-end：下对齐。
  3. center：居中。
    1. html,body{
    2.  height: 100%;               /*html与body的高度默认为0，所以要设置高度*/
    3. }
    4. body{
    5.  display: flex;
    6.  flex-wrap: wrap;           /*如果允许换行，那么换行后，多行元素中的每一行也会垂直居中*/
    7.  justify-content: center;
    8.  align-items: center;       /*不论是一行，还是多行，都会垂直居中*/
    9. }
    06.弹性布局 - 图6
    再来看align-content样式：align-content样式对单行没有效果，对多行有效果，而且是将多行整体作为一个整体附加效果的。
    06.弹性布局 - 图7

    总结：在弹性盒子中，子元素侧轴对齐方式可以使用align-items或align-content

    1. align-items对单行和多行都有效，align-content对单行无效。
    2. 在多行中，align-items让每一行都在各自范围内垂直居中。 align-content将多行作为一个整> 体，然后居中。

2.6.flex样式

如果想让每个子元素所占空间不一致，那么可以使用flex给子元素分配空间。 使用flex时要注意一下两点：

  1. flex样式是设置在子元素上的。
  2. 如果设置了flex，那就说明要给子元素按比例分配空间，因此width与height就失效了。

实例1：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             html,body{
  8.                 height: 100%;
  9.             }
  10.             body{
  11.                 display: flex;
  12.             }
  13.             .son{
  14.                 width: 100px;
  15.                 height: 100px;
  16.                 border: solid 2px #f90;
  17.                 background-color: yellow;
  18.             }
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <div class="son" style="flex:1;">1</div>
  23.         <div class="son" style="flex:1;">2</div>
  24.         <div class="son" style="flex:2;">3</div>
  25.         <div class="son" style="flex:2;">3</div>
  26.     </body>
  27. </html>

06.弹性布局 - 图8
上面实例中：flex样式后跟1个值：表示子元素所占空间的比例。三个div的宽度分别是窗口宽度的：1/4、1/2、1/4
实例2：

  1. <!-- 第一个div的宽度是400px，是不变的。第二个和第三个div将剩下宽度按比例分配：1/3、2/3 -->
  2. <body>
  3.     <div class="son" style="flex:0 0 400px;">1</div>
  4.     <div class="son" style="flex:1;">2</div>
  5.     <div class="son" style="flex:2;">3</div>
  6. </body>

06.弹性布局 - 图9
上面实例中：flex样式后跟3个值：

  1. 第一个值：子元素尺寸自动放大值
  2. 第二个值：子元素尺寸自动缩小值
  3. 第三个值：子元素尺寸（”auto”或”%”、”px”、”em” 或任何其他长度单位的数字。）

例如：

  • 0 1 auto（默认）：父元素尺寸变化时，子元素不放大，只缩小，尺寸自动充满。
  • 1 1 auto： 父元素尺寸变化时，子元素自动放大缩小，尺寸自动充满。
  • 0 0 300px： 父元素尺寸变化时，子元素不放大缩小，尺寸固定。

    总结：可以使用flex让一行内的所有子元素自动撑满窗口宽度。而且每个子元素的宽度可以按比例> 进行分配。

3.布局实例

3.1.典型1-3-1布局

06.弹性布局 - 图10

  1. <style>
  2.     header,nav,article,section,aside,footer{
  3.         background-color: #666;
  4.     }
  5.     p{
  6.         line-height: 50px;
  7.     }
  8.     .container{
  9.         width: 1200px;
  10.         margin: 0 auto;
  11.     }
  12.     .container header{
  13.         width: 100%;
  14.         height: 60px;
  15.         margin-bottom: 10px;
  16.     }
  17.     .container nav{
  18.         width: 100%;
  19.         height: 60px;
  20.         margin-bottom: 10px;
  21.     }
  22.     /*网页主要内容部分不能设置高度*/
  23.     .container .main{
  24.         width:100%;
  25.         display: flex;
  26.         margin-bottom: 10px;
  27.     }
  28.     .container .main article{
  29.         flex: 0 0 200px;
  30.     }
  31.     .container .main section{
  32.         flex: 1;
  33.         margin: 0 10px;
  34.     }
  35.     .container .main aside{
  36.         flex: 0 0 200px;
  37.     }
  38.     .container footer{
  39.         width: 100%;
  40.         height: 60px;
  41.     }
  42. </style>
  43. <!-- 总容器 -->
  44. <div class="container">
  45.     <header></header>
  46.     <nav></nav>
  47.     <!-- 网页主要内容部分 -->
  48.     <div class="main">
  49.         <article></article>
  50.         <section>
  51.             <p>内容部分</p><p>内容部分</p><p>内容部分</p><p>内容部分</p>
  52.         </section>
  53.         <aside></aside>
  54.     </div>
  55.     <footer></footer>
  56. </div>

注意点：

  1. 由于PC端屏幕尺寸相对固定，所以采用定宽不定高的原则。
  2. 所有页面元素都放在一个总容器中，然后就可以使总容器水平居中了。
  3. 网页主要内容部分不能设置高度，而应该是由内容撑开的。

3.2.典型自适应高度后台管理布局

06.弹性布局 - 图11

  1. <style>
  2.     html,body,.container {
  3.         width: 100%;
  4.         height: 100%;
  5.         margin: 0;
  6.         padding: 0;
  7.         display: flex;
  8.         flex-direction: column;
  9.     }
  10.     .container header {
  11.         flex:0 0 60px;
  12.         width: 100%;
  13.         background-color: #B3C0D1;
  14.     }
  15.     /*撑满header与footer剩余的高度*/
  16.     .container .main {
  17.         flex:1;
  18.         width: 100%;
  19.         display: flex;
  20.     }
  21.     .container .main aside {
  22.         flex: 0 0 200px;
  23.         background-color: #D3DCE6;
  24.     }
  25.     .container .main section {
  26.         flex: 1;
  27.         background-color: #E9EEF3;
  28.     }
  29.     .container footer {
  30.         flex:0 0 60px;
  31.         width: 100%;
  32.         background-color: #B3C0D1;
  33.     }
  34. </style>
  35. <!-- 总容器 -->
  36. <div class="container">
  37.     <header></header>
  38.     <!-- 网页主要内容部分 -->
  39.     <div class="main">
  40.         <aside></aside>
  41.         <section></section>
  42.     </div>
  43.     <footer></footer>
  44. </div>

注意点：

  1. 后台管理页面布局的宽度和高度，一般都会自动撑满整个窗口。
  2. header和footer的高度可以固定，中间内容部分撑满剩余高度。

4.实战项目：小米官网首页

开发Vue官网首页：
06.弹性布局 - 图12
index.html文件：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>小米官网 首页</title>
  6.         <link rel="stylesheet" href="css/reset.css">
  7.         <link rel="stylesheet" href="css/index.css">
  8.     </head>
  9.     <body>
  10.         <!-- 总容器-->
  11.         <div class="wrapper">
  12.             <!-- 头部菜单-->
  13.             <header>
  14.                 <div class="menu">
  15.                     <div class="menu-left">
  16.                         <ul>
  17.                             <li><a>小米商城</a></li>
  18.                             <li><a>MIUI</a></li>
  19.                             <li><a>IoT</a></li>
  20.                             <li><a>云服务</a></li>
  21.                             <li><a>金融</a></li>
  22.                             <li><a>有品</a></li>
  23.                             <li><a>小爱开放平台</a></li>
  24.                             <li><a>资质证照</a></li>
  25.                             <li><a>协议规则</a></li>
  26.                             <li><a>下载app</a></li>
  27.                             <li><a>Select Location</a></li>
  28.                         </ul>
  29.                     </div>
  30.                     <div class="menu-right">
  31.                         <ul>
  32.                             <li><a onclick="location.href='login.html'">登录</a></li>
  33.                             <li><a>注册</a></li>
  34.                             <li><a>消息通知</a></li>
  35.                         </ul>
  36.                         <div class="cart">购物车（0）</div>
  37.                     </div>
  38.                 </div>
  39.             </header>
  40.             <!-- 企业logo部分-->
  41.             <div class="logo">
  42.                 <div class="logo-img">
  43.                     <img src="img/logo.png">
  44.                 </div>
  45.                 <ul>
  46.                     <li class="logo-box-li"><a>小米手机</a></li>
  47.                     <li class="logo-box-li"><a>Redmi 红米</a></li>
  48.                     <li class="logo-box-li"><a>电视</a></li>
  49.                     <li class="logo-box-li"><a>笔记本</a></li>
  50.                     <li class="logo-box-li"><a>家电</a></li>
  51.                     <li class="logo-box-li"><a>路由器</a></li>
  52.                     <li class="logo-box-li"><a>智能硬件</a>
  53.                     <li class="logo-box-li"><a>服务</a></li>
  54.                     <li class="logo-box-li"><a>社区</a></li>
  55.                 </ul>
  56.                 <div class="search">
  57.                     <input type="text" placeholder="小米10">
  58.                     <div class="search-icon-box">
  59.                         <img src="img/search.jpg">
  60.                     </div>
  61.                 </div>
  62.             </div>
  63.             <!-- 横幅广告部分-->
  64.             <div class="banner">
  65.                 <div class="banner-lunbo">
  66.                     <img class="lunbo-img" src="img/lunbo5.jpg">
  67.                 </div>
  68.                 <div class="banner-mengban"></div>
  69.                 <ul>
  70.                     <li>
  71.                         <a>手机 电话卡</a>
  72.                         <span>&#8250;</span>
  73.                     </li>
  74.                     <li>
  75.                         <a>电视 盒子</a>
  76.                         <span>&#8250;</span>
  77.                     </li>
  78.                     <li>
  79.                         <a>笔记本 显示器 平板</a>
  80.                         <span>&#8250;</span>
  81.                     </li>
  82.                     <li>
  83.                         <a>家电 插线板</a>
  84.                         <span>&#8250;</span>
  85.                     </li>
  86.                     <li>
  87.                         <a>出行 穿戴</a>
  88.                         <span>&#8250;</span>
  89.                     </li>
  90.                     <li>
  91.                         <a>智能 路由器</a>
  92.                         <span>&#8250;</span>
  93.                     </li>
  94.                     <li>
  95.                         <a>电源 配件</a>
  96.                         <span>&#8250;</span>
  97.                     </li>
  98.                     <li>
  99.                         <a>健康 儿童</a>
  100.                         <span>&#8250;</span>
  101.                     </li>
  102.                     <li>
  103.                         <a>耳机 音箱</a>
  104.                         <span>&#8250;</span>
  105.                     </li>
  106.                     <li>
  107.                         <a>生活 箱包</a>
  108.                         <span>&#8250;</span>
  109.                     </li>
  110.                 </ul>
  111.             </div>
  112.             <!-- 产品部分-->
  113.             <div class="product">
  114.                 <ul>
  115.                     <li>
  116.                         <img src="img/service1.png">
  117.                         <span>小米秒杀</span>
  118.                     </li>
  119.                     <li>
  120.                         <img src="img/service2.png">
  121.                         <span>企业团购</span>
  122.                     </li>
  123.                     <li>
  124.                         <img src="img/service3.png">
  125.                         <span>F码通道</span>
  126.                     </li>
  127.                     <li>
  128.                         <img src="img/service4.png">
  129.                         <span>米粉卡</span>
  130.                     </li>
  131.                     <li>
  132.                         <img src="img/service5.png">
  133.                         <span>以旧换新</span>
  134.                     </li>
  135.                     <li>
  136.                         <img src="img/service6.png">
  137.                         <span>话费充值</span>
  138.                     </li>
  139.                 </ul>
  140.                 <div class="product-img">
  141.                     <img src="img/product1.jpg">
  142.                 </div>
  143.                 <div class="product-img">
  144.                     <img src="img/product2.jpg">
  145.                 </div>
  146.                 <div class="product-img">
  147.                     <img src="img/product3.jpg">
  148.                 </div>
  149.             </div>
  150.         </div>
  151.     </body>
  152. </html>

reset.css文件：

  1. /************************ css 重置 ************************/
  2. html,body,div,span,h1,h2,h3,h4,h5,h6,ul,li,p{
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. html,body{
  7.     width: 100%;
  8.     /*按照小米官网设置*/
  9.     font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
  10. }
  11. ul{
  12.     list-style: none;
  13. }
  14. a{
  15.     text-decoration: none;
  16. }

index.css文件：

  1. /************************ wrapper总容器 ************************/
  2. .wrapper{
  3.     width: 100%;
  4. }
  5. /************************ header 头部 ************************/
  6. header{
  7.     width: 100%;
  8.     height: 40px;
  9.     background-color: #333;
  10. }
  11. /************************ header menu  ************************/
  12. header .menu{
  13.     width: 1226px;
  14.     height: 40px;
  15.     margin: 0 auto;
  16.     display: flex;
  17.     justify-content: space-between;
  18.     align-items: center;
  19. }
  20. /* menu中的两个ul样式是一样的 */
  21. header .menu ul{
  22.     display: flex;
  23.     height: 12px;
  24. }
  25. header .menu ul li{
  26.     display: flex;
  27.     align-items: center;
  28.     border-right: solid 1px #424242;
  29. }
  30. header .menu ul li:last-child{
  31.     border-right: none;
  32. }
  33. header .menu ul li a{
  34.     color: #b0b0b0;
  35.     font-size: 12px;
  36.     margin: 0 8px;
  37.     cursor: pointer;
  38. }
  39. header .menu ul li a:hover{
  40.     color: #fff;
  41. }
  42. header .menu ul li:first-child a{
  43.     margin-left: 0;
  44. }
  45. header .menu .menu-right{
  46.     display: flex;
  47.     align-items: center;
  48. }
  49. header .menu .menu-right .cart{
  50.     width: 120px;
  51.     height: 40px;
  52.     background-color: #424242;
  53.     margin-left: 20px;
  54.     text-align: center;
  55.     line-height: 40px;
  56.     font-size: 12px;
  57.     color: #b0b0b0;
  58. }
  59. header .menu .menu-right .cart:hover{
  60.     background-color: #fff;
  61.     color: #FF6700;
  62.     cursor: pointer;
  63.     /*user-select: none;是设置鼠标不能文本选中状态*/
  64.     user-select: none;
  65. }
  66. /************************ 企业logo部分  ************************/
  67. .logo{
  68.     width: 1226px;
  69.     height: 100px;
  70.     margin: 0 auto;
  71.     display: flex;
  72.     justify-content: space-between;
  73.     align-items: center;
  74. }
  75. .logo .logo-img{
  76.     width: 55px;
  77.     height: 55px;
  78.     background-color: #FF6700;
  79.     display: flex;
  80.     justify-content: center;
  81.     align-items: center;
  82. }
  83. .logo ul{
  84.     display: flex;
  85. }
  86. .logo ul li a{ 
  87.     margin: 0 10px;
  88.     font-size: 16px;
  89.     color: #333;
  90.     cursor: pointer;
  91. }
  92. .logo ul li a:hover{
  93.     color:#FF6700;
  94. }
  95. .logo .search{
  96.     width: 296px;
  97.     height: 50px;
  98.     box-sizing: border-box;
  99.     border: solid 1px #e0e0e0;
  100.     display: flex;
  101.     justify-content: space-between;
  102.     align-items: center;
  103. }
  104. .logo .search input{
  105.     margin-left: 10px;
  106.     width: 220px;
  107.     border: none;
  108.     outline: none;
  109. }
  110. .logo .search .search-icon-box{
  111.     width: 48px;
  112.     height: 48px;
  113.     border-left: solid 1px #e0e0e0;
  114. }
  115. /************************ banner 横幅广告部分  ************************/
  116. .banner{
  117.     width: 1226px;
  118.     height: 460px;
  119.     margin: 0 auto;
  120.     /*横幅广告容器要做成相对定位，给子元素做父元素*/
  121.     position: relative;
  122. }
  123. .banner .banner-lunbo,.banner .banner-lunbo img{
  124.     width: 100%;
  125.     height: 460px;
  126. }
  127. .banner .banner-mengban{
  128.     width: 234px;
  129.     height: 460px;
  130.     background-color: #000;
  131.     position: absolute;
  132.     left: 0;
  133.     top: 0;
  134.     opacity: 0.3;
  135. }
  136. .banner ul{
  137.     width: 234px;
  138.     height: 420px;
  139.     position: absolute;
  140.     left: 0;
  141.     top: 20px;
  142. }
  143. .banner ul li{
  144.     width: 234px;
  145.     height: 42px;
  146.     cursor: pointer;
  147.     display: flex;
  148.     justify-content: space-between;
  149.     align-items: center;
  150. }
  151. .banner ul li:hover{
  152.     background-color: #FF6700;
  153. }
  154. .banner ul li a{
  155.     margin-left: 30px;
  156.     font-size: 14px;
  157.     color: #fff;
  158. }
  159. .banner ul li span{
  160.     margin-right: 30px;
  161.     font-size: 24px;
  162.     color: #fff;
  163. }
  164. /************************ product 产品部分  ************************/
  165. .product{
  166.     width: 1226px;
  167.     height: 170px;
  168.     margin: 14px auto 100px;
  169.     display: flex;
  170.     justify-content: space-between;
  171. }
  172. .product ul{
  173.     width:234px;
  174.     height: 170px;
  175.     background-color: #5f5750;
  176.     display: flex;
  177.     flex-wrap: wrap;
  178. }
  179. .product ul li{
  180.     width:78px;
  181.     height: 85px;
  182.     display: flex;
  183.     flex-direction: column;
  184.     justify-content: center;
  185.     align-items: center;
  186.     font-size: 12px;
  187.     color: #b0b0b0;
  188.     user-select: none;
  189.     cursor: pointer;
  190.     /*在li中添加的横线与竖线是绝对定位的*/
  191.     position: relative;
  192. }
  193. .product ul li img{
  194.     margin-bottom: 3px;
  195. }
  196. .product ul li:hover{
  197.     color: #fff;
  198. }
  199. .product .product-img,.product .product-img img{
  200.     width: 316px;
  201.     height: 170px;
  202. }
  203. /*::before表示在此元素前加元素*/
  204. .product ul li::before{
  205.     width: 1px;
  206.     height: 70px;
  207.     background-color: #665e57;
  208.     /*加的这个元素中必须要有内容，所以这里加一个空字符串*/
  209.     content: "";
  210.     position: absolute;
  211.     right: 0;
  212.     top: 7px
  213. }
  214. /*::before表示在此元素后加元素*/
  215. .product ul li::after{
  216.     width: 64px;
  217.     height: 1px;
  218.     background-color: #665e57;
  219.     content: "";
  220.     position: absolute;
  221.     left: 7px;
  222.     bottom: 0;
  223. }