Я пытаюсь создать flexbox в Javascript для загрузки нескольких проектов из моей CMS. Должно быть 3 изображения, представляющих проекты в строке, поэтому я определил flexbox со свойством переноса строк ..
Контейнерный элемент имеет фиксированную ширину и высоту, и поэтому я ожидаю, что цикл будет выполняться 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>