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

页面布局：流式布局（百分比）+弹性布局（flex）。
1.将页面 html,bodey设置宽高百分百

 html,body{
            width: 100%;
            height: 100%;
        }

2.使用flex弹性布局

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;
  }