Flex布局实现简单的弹性盒样式
作者:互联网
样式描述
布局实现头部和底部高度固定,中间内容实现自动填充剩余空间;
中间区域分为三部分,根据媒体查询修改flex布局主轴的对齐方向等。
以body标签开始
标签内设置为flex布局,主轴改为纵轴y
body{ width: 100%; height: 100%; display: flex; flex-direction: column; }
html{ height: 100%; }
这里html和body标签设置高度height为100%是为了能够更好的实现中间内容flex-grow的扩展
body内标签
<header>header</header> <div id="middle"> <div class="nav">nav</div> <div class="article">article</div> <div class="aside">aside</div> </div> <footer>footer</footer>
头部和底部标签样式
header,footer{ min-height: 100px; border: 3px solid antiquewhite; border-radius: 10px; }
中间内容样式
#middle{ flex-grow: 1; display: flex; min-height: 500px; }
//这里的flex-grow是相对于body标签的flex布局设置为扩展比率为1,如果没有这个flex-grow,middle的内容高度仅为设置的500px
然后将middle内设置为flex布局(默认主轴对齐方式为row)
nav、article、aside样式
.nav{ order: 1; flex-grow: 1; background-color: #ffba41; } .article{ order: 2; flex-grow: 3; background-color: #719dca; } .aside{ order: 3; flex-grow: 1; background-color: #ffba41; }
媒体查询
@media screen and (max-width:640px){ #middle{ flex-direction: column; } header,footer{ min-height: 50px; } .nav{ order: 2; } .article{ order: 1; } }
flex-direction 属性规定弹性盒中项目的方向。
flex-grow 属性用于设置或检索弹性盒子的扩展比率。
order 属性设置或检索弹性盒模型对象的子元素出现的顺序。
标签:body,Flex,flex,样式,标签,弹性,height,order,grow 来源: https://www.cnblogs.com/wweebb/p/flex_simple-box_body-elastic.html