Flex布局之学习（三）

此篇文章是上一篇文章Flex布局之学习（二）的进一步完善，加入了每一块中的内容，并实现内容水平垂直居中。

实现效果

 实现方法

•  在Header和Footer中比较简单，只需要设置

text-align: center; <!--水平居中-->
line-height: 68px; <!--垂直居中-->

• 在content中则不能用此方法，因为其高度是不固定的，将line-height设置成100%显然是不可行的，所以在本篇文章中，我介绍一下用flex布局的实现方法。

代码

HTML部分

<div class="container">
     <div class="header">Header</div>
     <div class="content">
         <div class="content-left">
            <div class="left">left</div>
         </div>
            
         <div class="content-middle">
             <div class="middle">middle</div>
         </div>

         <div class="content-right">
             <div class="right">right</div>
         </div>  
     </div>
     <div class="footer">Footer</div>
</div>

CSS部分

body{
        margin: 0;
        padding: 0;
        font-size: 30px;
    }
    .container {
        width: 100%;
        min-height: 100%px;
        background-color: lightsalmon;
    }
    .header {
        height: 68px;
        width: 100%;
        text-align: center;
        line-height: 68px;
        position: absolute;
        background-color: lightsalmon;
    }
    .content {
      display: flex;
      display: -webkit-flex;
      /*纵向排列*/
      /* flex-direction: column; */
      width: 100%;    
      /* 水平居中 */
      justify-content: center;
      /*垂直居中*/
      align-items: center;
      background-color:lightgreen;
      position: absolute;
      top:68px;
      bottom:68px;
      overflow: auto; /*超出的部分，滚动条显示*/
  } 

  .content-left {
      background-color: aquamarine;
      width: 320px;
      /* 不放大 不缩小 固定宽度320px */
      flex: 0 0 320px;
      height: 100%;
  }
  .content-middle {
      background-color: yellow;
      height: 100%;
      flex: 1 1 auto;
  }
  .content-right {
      background-color: aquamarine;
      width: 320px;
      height: 100%;
      /* 不放大 不缩小 固定宽度320px */
      flex: 0 0 320px;
  }
  .content-left,.content-middle,.content-right {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .footer {
        width: 100%;
        height: 68px;
        position: absolute;
        bottom: 0;
        background-color: lightsalmon;
        text-align: center;
        line-height: 68px;
    }