vue 使用flex布局开发一个很多模块错乱组成的页面，如何对每个页面进行宽度、高度设置

使用flex布局可以很方便的对页面进行宽度、高度设置，具体做法如下：

1. 在父容器上设置display: flex;属性，开启flex布局。

2. 对每个子元素设置flex属性，可以通过设置flex-grow、flex-shrink、flex-basis等属性来控制子元素在flex容器中的大小。

3. 如果需要设置子元素的宽度和高度，可以使用width和height属性进行设置。

4. 如果需要对子元素进行对齐，可以使用align-self和justify-content属性进行设置。

示例代码如下：

<div class="container">
  <div class="item item1">模块1</div>
  <div class="item item2">模块2</div>
  <div class="item item3">模块3</div>
  <div class="item item4">模块4</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-grow: 1;
  flex-basis: 0;
  height: 100px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
}

.item1 {
  width: 50%;
}

.item2 {
  width: 25%;
}

.item3 {
  width: 25%;
}

.item4 {
  width: 100%;
}

上面的代码中，我们通过设置flex-grow、flex-basis和width属性来控制每个子元素的大小和宽度，通过设置height属性来设置每个子元素的高度，通过设置align-self和justify-content属性来对子元素进行对齐。