/*
上中下布局,中间自适应(中间左边固定,右边自适应)
*/
<style>
*{
margin:0;
padding: 0;
}
.header{
width:100%;
background-color:orange;
height:45px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.flex-container {
height: calc(100vh - 85px);
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: #fff;
/*justify-content: space-around;*/
justify-content: space-between;
}
.flex-container .item{
width: 200px;
height: calc(100vh-85px);
background-color:skyblue;
}
.flex-container .flex-item {
flex:1;/*中间右边自适应*/
height: calc(100vh-85px);/*中间高度自适应*/
background-color:lightsalmon;
}
.flooter{
height: 40px;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
#screen{
display: none;
position: absolute;
width: 100%;
height: 100%;
background: #eee;
z-index: 999999;
text-align: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@media screen and ( max-width: 900px ) {
#screen{
display: block;
}
}
</style>
<div class="warp">
<div id="screen">
<div style="margin-top:200px;">浏览器分辨率过低!最低分辨率为900!</div>
</div>
<div class="header">头部</div>
<div class="flex-container">
<div class="item">中间最左边</div>
<div class="flex-item">中间最右边</div>
</div>
<div class="flooter">底部</div>
</div>
布局模板应用
最新推荐文章于 2024-08-14 09:51:23 发布