flex的几个常用布局(flex常见的布局方式技巧)

　　介绍今天和大家讲一下怎么使用flex布局来实现常见的页面布局，并且能适应大部分的终端

　　样式重置

　　首页我们可以引入normalize.css把样式重置，这样可以让元素的默认样式在所有的浏览器表现一致

　　官网地址:http://necolas.github.io/normalize.css/

　　normalize.css

　　官网下载normallize.css并引入到项目中就可以了

　　头部加主体内容上下结构布局

　　头部加主体上下布局

　　// page包裹,并且高度100%
　　// flex布局，方向是上下
　　.page {
　　height: 100%;
　　display: flex;
　　flex-direction: column;
　　}
　　// 头部固定高度60px
　　// 并且flex设置为none
　　.header {
　　flex: none;
　　height: 60px;
　　background-color: #b3c0cf;
　　}
　　// 主体部分flex为1,这样就会占用剩下所有部分
　　// overflow-y为auto，如果屏幕高度不够
　　// 那么主体部分自适应出现滚动条
　　.main {
　　flex: 1;
　　overflow-y: auto;
　　background-color: #e9eef3;
　　}

　　头部+主体+尾部上下结构布局

　　头部+主体+尾部上下结构布局

   //样式同上，只是把footer跟header加一块
　　.header,.footer {
　　flex: none;
　　height: 60px;
　　background-color: #b3c0cf;
　　}

　　侧边栏+主体左右布局

侧边栏+主体左右布局

　  // page包裹,并且高度100%
　　// flex布局，方向默认就是左右
　　.page {
　　height: 100%;
　　display: flex;
　　}
　　// 左侧固定宽度220px
　　// 并且flex设置为none
　　.aside {
　　flex: none;
　　width: 220px;
　　background-color: #b3c0cf;
　　}
　　// 主体部分flex为1,这样就会占用剩下所有部分
　　// overflow-y为auto，如果屏幕高度不够
　　// 那么主体部分自适应出现滚动条
　　.main {
　　flex: 1;
　　overflow-y: auto;
　　background-color: #e9eef3;
　　}

　　头部(左侧+主体)上下布局

　　头部(左侧+主体)上下布局

　　.page {
　　height: 100%;
　　display: flex;
　　flex-direction: column;
　　}
　　.header {
　　flex: none;
　　height: 60px;
　　background-color: #b3c0cf;
　　}
　　.container {
　　flex: 1;
　　display: flex;
　　}
　　.aside {
　　flex: none;
　　width: 220px;
　　background-color: #d3dce5;
　　}
　　.main {
　　flex: 1;
　　overflow-y: auto;
　　background-color: #e9eef3;
　　}

　　头部、左侧、主体、尾部如下图

头部、左侧、主体、尾部

　　.page {
　　height: 100%;
　　display: flex;
　　flex-direction: column;
　　}
　　.header {
　　flex: none;
　　height: 60px;
　　background-color: #b3c0cf;
　　}
　　.container-tb {
　　flex: 1;
　　display: flex;
　　}
　　.container-lr {
　　flex: 1;
　　display: flex;
　　flex-direction: column;
　　}
　　.aside {
　　flex: none;
　　width: 220px;
　　background-color: #d3dce5;
　　}
　　.main {
　　flex: 1;
　　overflow-y: auto;
　　background-color: #e9eef3;
　　}
　　.footer {
　　flex: none;
　　height: 60px;
　　background-color: #b3c0cf;
　　}

　　头部、左侧、主体、如下图

　　头部、左侧、主体

　　.page {
　　height: 100%;
　　display: flex;
　　}
　　.header {
　　flex: none;
　　height: 60px;
　　background-color: #b3c0cf;
　　}
　　.container {
　　display: flex;
　　flex-direction: column;
　　flex: 1;
　　}
　　.aside {
　　flex: none;
　　width: 220px;
　　background-color: #d3dce5;
　　}
　　.main {
　　flex: 1;
　　overflow-y: auto;
　　background-color: #e9eef3;
　　}

　　头部、左侧、主体、尾部如下图

头部、左侧、主体、尾部

.page {
　　height: 100%;
　　display: flex;
　　}
　　.header,.footer {
　　flex: none;
　　height: 60px;
　　background-color: #b3c0cf;
　　}
　　.container {
　　display: flex;
　　flex-direction: column;
　　flex: 1;
　　}
　　.aside {
　　flex: none;
　　width: 220px;
　　background-color: #d3dce5;
　　}
　　.main {
　　flex: 1;
　　overflow-y: auto;
　　background-color: #e9eef3;
　　}

好了，开发当中基本上能用到的布局都在上面了