使用Flex弹性布局，制作电影列表页，参考图： （接口API地址:https://api.douban.com/v2/movie/new_movies?apikey=0df993c66c0c636e29ecbb5344252a4a）

由于我是AI语言模型，无法提供图片。以下为Flex弹性布局实现电影列表页的代码：

HTML代码：

<div class="container">
  <div class="header">
    <h1>电影列表</h1>
  </div>
  <div class="movies-list">
    <!-- 循环生成电影卡片 -->
    <div class="movie-card" v-for="movie in movies" :key="movie.id">
      <div class="movie-img">
        <img :src="movie.images.medium" alt="">
      </div>
      <div class="movie-info">
        <h2>{{ movie.title }}</h2>
        <div class="movie-rating">{{ movie.rating.average }}</div>
        <div class="movie-genres">{{ movie.genres.join('/') }}</div>
        <div class="movie-year">{{ movie.year }}</div>
      </div>
    </div>
  </div>
</div>

CSS代码：

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.movies-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.movie-card {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.movie-img {
  height: 300px;
  overflow: hidden;
}

.movie-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie-info {
  padding: 20px;
}

.movie-info h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.movie-rating {
  font-size: 16px;
  margin-bottom: 10px;
  color: #f39c12;
}

.movie-genres {
  font-size: 14px;
  margin-bottom: 10px;
  color: #95a5a6;
}

.movie-year {
  font-size: 14px;
  color: #95a5a6;
}

JavaScript代码：

new Vue({
  el: '#app',
  data() {
    return {
      movies: []
    };
  },
  mounted() {
    axios.get('https://api.douban.com/v2/movie/new_movies?apikey=0df993c66c0c636e29ecbb5344252a4a').then(res => {
      this.movies = res.data.subjects;
    });
  }
});