前端项⽬页⾯布局（流式+flex）
页⾯布局：流式布局（百分⽐）+弹性布局（flex）。
1.将页⾯ html,bodey设置宽⾼百分百
html,body{
width: 100%;
height: 100%;
}
2.使⽤flex弹性布局
<style>
.box{
display: flex;
flex-direction:row;
justify-content:center;
align-items:center;
width: 80%;
height: 80%;
background-color: #ccc;
margin: 0 auto;
}
margin属性值可以为百分比.box>div{
width: 20%;
height: 20%;
background-color: red;
margin-right: 10px;
}
.d1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.d1 div{
width: 30%;
height: 30%;
background-color: #fff;
}
</style>
<body>
<div class="box">
<div class="d1">
<div></div>
<div></div>
</div>
<div></div>
<div></div>
</div>
</body>
3.如果兼容到最⼤或最⼩屏幕尺⼨ 可以给html,body设置最⼤最⼩值(具体根据设计稿尺⼨)
html,body{
width: 100%;
height: 100%;
min-width: 1266px;/*最⼩兼容屏幕1266px，超出不兼容*/
max-width: 1620px;/*最⼤兼容屏幕1620px，超出不兼容*/
}
4.如果是vue项⽬ 可以把html,body写在app.vue中，下⾯是Vue 流式布局+弹性布局+sass app.vue
body,
html {
width: 100%;
height: 100%;
}
组件.vue
.role-check{
display: flex;
justify-content: space-between;
align-items: center;
width: 60%;
margin: 0 auto;
}
.
role-info{
flex: 1;
display: flex;
flex-direction: column;
img{
display: block;
width: 180px;
height: 180px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。