javascript - flexbox javascript从cms动态加载

我正在尝试在 Javascript 中创建一个 flexbox 以从我的 CMS 加载多个项目.. 每行应该有 3 个代表项目的图像，因此我定义了一个具有 row wrap 属性的 flexbox ..

容器元素具有固定的宽度和高度，因此我希望循环运行 4 次，创建 4 个堆叠成一行的项目，最后一个项目从下一行开始。我得到的是什么代码片段是 4 个全屏宽度的项目。我在屏幕上看到的真实图片是一张图片，仅此而已..

谁能解释为什么会这样？

    var flexbox_projects = document.createElement("div");
    flexbox_projects.className = "flex-container";
    flexbox_projects.id = "flexbox_projects";
    document.getElementById("body").appendChild(flexbox_projects);


    for (i=0; i<4; i++){

      var container_project = document.createElement("div");
      container_project.className = "container_project";
     document.getElementById("flexbox_projects").appendChild(container_project);

      var image_project = document.createElement("img");
      image_project.className = "main_picture";
      image_project.src = "img/trailrun.jpg";
      container_project.appendChild(image_project);

    }

.container_project{
    width: 23vw;
    height: 13vw;
}

.main_picture{
    width: 100%;
    height: 100%;
    z-index: 2;
}


.flex-container{

    display: flex;
    flex-flow: row wrap;

}