Flex布局之学习笔记（二）

实现效果

实现方法 

整体布局由header、footer、content三部分组成，由绝对定位实现（position:absolute），header和footer部分设置高，中间部分自适应高度。其中content又分成left、right、middle三部分，由Flex布局实现，左右两边设置宽度，中间内容自适应宽度。

代码

HTML部分

<div class="container">
    <!--头部-->
    <div class="header"></div>
    <!--内容部分-->
    <div class="content">
        <div class="content-left"></div>
        <div class="content-middle"></div>
        <div class="content-right"></div>  
    </div>
    <!--底部-->
    <div class="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%;
      position: absolute;
      background-color: lightsalmon;
    }
 .content {
      display: flex;
      display: -webkit-flex;
      /*纵向排列*/
      /* flex-direction: column; */
      width: 100%;    
      background-color:lightgreen;
      position: absolute;
      top:68px;
      bottom:68px;
      overflow: auto; /*超出的部分，滚动条显示*/
  } 

  .content-left {
      background-color: aquamarine;
      width: 320px;
      /* 不放大 不缩小 固定宽度320px */
      flex: 0 0 320px;
      <!--高度为父元素的100%-->
      height: 100%;
  }
  .content-middle {
      background-color: yellow;
      height: 100%;
      <!--可放大 可缩小,自适应宽度-->
      flex: 1 1 auto;
  }
  .content-right {
      background-color: aquamarine;
      width: 320px;
      height: 100%;
      text-align: center;
      /* 不放大 不缩小 固定宽度320px */
      flex: 0 0 320px;
  }
  .footer {
        width: 100%;
        height: 68px;
        position: absolute;
        <!--紧贴底部-->
        bottom: 0;
        background-color: lightsalmon;
    }

补充知识

flex的属性取值

flex不写时，属性默认是0 1 auto，即

• flex-grow为0，存在剩余空间也不放大
• flex-shrink为1，空间不足该项目缩小
• flex-basis为auto，该项目本来的大小

 flex：1 1 1 auto;

• flex-grow为1，存在剩余空间时放大
• flex-shrink为1，空间不足该项目缩小
• flex-basis为auto，自适应剩余的空间