前端项目页面布局（流式+flex）

最新推荐文章于 2025-04-29 09:51:33 发布

王小野

最新推荐文章于 2025-04-29 09:51:33 发布

阅读量2.5k

点赞数

本文链接：https://blog.youkuaiyun.com/wangye111112222/article/details/100071785

版权

页面布局：流式布局（百分比）+弹性布局（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;
        }
        .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;
  }