CODEWITHSUNDEEP
javascriptflexbox
Niels Vanwingh
Niels Vanwingh

Reputation: 604

flexbox javascript dynamic loading from cms

I am trying to create a flexbox in Javascript to load a number of projects from my CMS.. There should be 3 images that represent projects per row, hence I defined a flexbox with row wrap property..

The container element has a fixed width and height, and so I would expect the loop to run 4 times, create 4 items that are stacked in a row with the last one starting at the next row.. What I am getting in the code snippet is 4 items with full screen width. What I am getting on my screen with real pictures is 1 picture, that's it..

Can anyone explain why this is happening?

    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>

Upvotes: 1

Views: 247

Answers (1)

Cl&#233;ment Baconnier
Cl&#233;ment Baconnier

Reputation: 6108

As I said in the comments

I think it's because // PROJECT STYLING and // PROJECT CONTAINING FLEXBOX STYLING are not valid comments

If you want to comment in CSS use /* my comment */

Upvotes: 1

Related Questions