5.圣杯布局，如图所示
<template> <div class="demo"> <div class="header">头部</div> <div class="body"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> <div class="footer">底部</div> </div> </template> <style lang="scss"> .demo{ display: flex; flex-direction: column; height: 100vh; } .demo div{ flex: 1; } .body{ display: flex; } .header,.footer,.left,.right{ flex: 0 0 20%!important; } .header{ background: #999; } .body{ .left{ background: gainsboro; } .center{ background: pink; } .right{ background: peachpuff; } } .footer{ background: #999; } </style>
6.输入框布局
有时需要在输入框的前部添加提示，或者后部添加按钮，如图所示：
<template> <div class="demo"> <span class="tip">icon</span> <input type="text" name="" /> <button>search</button> </div> </template> <style lang="scss"> .demo{ display: flex; height: 40px; } .tip{ width: 20px; height: 100%; line-height: 40px; text-align: center; } input{ flex:1; } </style>
7. 底部footer固定在底部，但是不是fixed定位
页面会经常用到固定的底栏，但是当页面内容过少时，footer会到页面中间，下面用flex来解决
<template> <div class="demo"> <div class="main"> <p>我是内容</p> </div> <div class="footer">这是底部</div> </div> </template> <style lang="scss"> .demo{ display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .main{ flex: 1; background: #fff; padding: 30px; } .footer{ width: 100%; height: 120px; background: #333; color: #ffff; line-height: 120px; text-align: center; flex-shrink: 0; } </style>
8.流式布局 ，如下如所示：
随便多少个，都会按照顺序排下去，啊哦，上次和你讲的时候我还不知道的，也是最近看的。
<template> <div class="demo"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </template> <style lang="scss"> .demo{ width: 100%; height: 300px; display: flex; flex-wrap: wrap; align-content: flex-start; } .item{ flex: 0 0 33.333333%; height: 137px; box-sizing: border-box; background: red; border: 1px solid #999; box-sizing: border-box; } </style>
