Question

我正在尝试用Javascript创建一个Flexbox，以从CMS加载许多项目。

应该每行有3张图像来表示项目，因此我定义了一个具有行换行属性的flexbox。

container元素具有固定的宽度和高度，因此我希望循环运行4次，创建4个项目，这些项目堆叠在一起，最后一个项目从下一行开始。代码段是4个具有全屏宽度的项目。我在屏幕上看到的真实图片是1张图片，就是这样。

谁能解释为什么会这样？

    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;

}

<body id="body">

</body>

Answer 1

正如我在评论中所说

我认为这是因为//项目样式和//项目包含 FLEXBOX STYLING无效的评论

如果要在CSS中添加注释，请使用/* my comment */

从cms的flexbox JavaScript动态加载

1 个答案: