flex布局嵌套之高度自适应

　　查遍各大资源无任何flex嵌套布局的例子，经过自己折腾完成了项目中的高度自适应需求（更多应用于前端组件）

效果图：

html代码：（关键地方已经用颜色特别标识 ^_^）

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>flex 嵌套 之 高度自适应</title>
  <style media="screen">
    body, html {
        height: 90%;
    }
    .flex {
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }
    .item {
        flex: auto;
    }
    .overflow {
        overflow: auto;
    }
    .outer {
        height: 70%;
        border: 1px solid silver;
    }
    .contener {
        background: pink;
        border: 1px solid silver;
    }
    .contener>div{
        padding: 5px;
    }
  </style>
</head>

<body>
  <h1>flex 嵌套布局</h1>
<div class="flex outer">
  <div style="background-color: silver; padding: 10px;">外容器 自适应内容的区域 ... ...</div>
  <div class="flex item overflow" style="padding: 15px;"> <!-- 嵌套的item加flex样式 及 overflow: auto属性 -->
    <div class="flex contener overflow">                  <!-- overflow: auto 高度自适应必须 -->
      <div style="background-color: yellow;">
        <h3>内容器 - 头部信息</h3>
      </div>
      <div class="item overflow">                         <!-- overflow: auto 高度自适应必须 -->
        内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
          内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
            内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
      </div>
      <div style="background-color: yellow;">
        <h3>内容器 - 尾部信息</h3>
      </div>
    </div>
  </div>
</div>

</body>

</html>

 总结：

　　flex布局嵌套的关键，就是对item进行容器定位，赋予flex特性。

 

flex知识学习小游戏： https://flexboxfroggy.com/

 

posted @ 2017-10-21 16:13  【云】风过无痕  阅读(32800)  评论(2)  编辑  收藏  举报