一个页面用flex布局，自动换行，全是照片，浏览器缩小时，让图片也进行缩小

可以给照片设置一个最大宽度，然后使用`flex-wrap: wrap`属性让照片自动换行。当浏览器缩小时，照片会自动缩小以适应父容器的宽度。

示例代码如下：

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

img {
  max-width: 100%;
}

相关问题

el-row flex布局 cl-col每行两列 每行两个卡片 每个卡片里一个charts图表支持放大缩小 要求卡片一样大 支持浏览器缩放

您好！针对您的问题，可以使用以下代码实现：

HTML 代码：

<div class="el-row">
  <div class="el-col">
    <div class="card">
      <div class="chart"></div>
    </div>
    <div class="card">
      <div class="chart"></div>
    </div>
  </div>
  <div class="el-col">
    <div class="card">
      <div class="chart"></div>
    </div>
    <div class="card">
      <div class="chart"></div>
    </div>
  </div>
</div>

CSS 代码：

.el-row {
  display: flex;
  flex-wrap: wrap;
}

.el-col {
  display: flex;
  flex: 1;
}

.card {
  flex: 1;
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.chart {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .el-row {
    flex-direction: column;
  }
}

解释一下上面的代码：

- 使用 `display: flex` 设置 `.el-row` 的布局为 flex 布局。
- 使用 `flex-wrap: wrap` 让 `.el-row` 中的子元素能够自动换行。
- 使用 `display: flex` 设置 `.el-col` 布局为 flex 布局。
- 使用 `flex: 1` 让每个 `.el-col` 占据相同的宽度。
- 使用 `flex: 1` 让每个 `.card` 占据相同的高度。
- 使用 `@media` 媒体查询实现在小屏幕下，`.el-row` 的布局变为垂直方向。

至于支持放大缩小的图表部分，可以使用第三方的图表库，例如 echarts，highcharts 等，这些库都支持放大缩小功能，并且可以通过 API 实现自适应浏览器缩放。

生成一个vue代码，里面很多div盒子，盒子宽高200px，随着浏览器页面的变小，盒子也随之变小，盒子之间的外边距是20px,缩小的时候盒子边距不能变化

可以使用CSS中的flex布局和媒体查询来实现这个效果。

首先，我们需要定义一个容器，用于包含所有的div盒子。这个容器设置为flex布局，并且设置flex-wrap为wrap，这样当浏览器宽度不足时，盒子会自动换行。

然后，我们定义每个div盒子的样式，包括宽度、高度、外边距等。为了实现缩小时盒子大小不变，我们可以使用vw单位来设置宽度和外边距，这样它们会随着浏览器宽度的变化而自动调整。

最后，我们使用@media查询来检测浏览器宽度是否小于某个值，如果是，则缩小每个盒子的大小，同时保持外边距不变。

下面是代码示例：

HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <<div class="box"></div>
  <div class="box"></div>
</div>

CSS代码：

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

.box {
  width: 200px;
  height: 200px;
  margin: 20px;
  background-color: #ccc;
}

@media (max-width: 800px) {
  .box {
    width: 30vw;
    height: 30vw;
  }
}

在上面的代码中，当浏览器宽度小于800px时，每个盒子的宽度和高度会变为浏览器宽度的30%，即30vw，同时保持外边距不变。