Мне нужно начать с 12 коробок одинакового размера, а затем ввести большую коробку, которая скрывает или занимает место предыдущей маленькой коробки после нажатия html. Это возможно с flex-box или вам определенно нужна другая техника? Я работаю с ванилью JavaScript и html с некоторыми css.
Я прилагаю функциональный пример здесь :
// "use strict";
onload = function() {
/////// MAIN GRID
let container = document.createElement("div");
let cla = document.createAttribute("class");
cla.value = "mainGrid";
container.setAttributeNode(cla);
document.body.appendChild(container);
let newWidth = 150;
let width = 320;
let height = 180;
let imageRatio = height / width;
let colors = ['#CC0000', '#00CC00', '#0000CC'];
///// THUMBS CONTAINERS
for (let i = 0; i < 20; i++) {
let color = colors.shift();
colors.push(color);
let divThumb = document.createElement("div"); // TILE CONTAINER
let id = document.createAttribute("id");
let thumbNumber = String(i).padStart(4, "0");
id.value = thumbNumber;
let divClass = document.createAttribute("class");
divClass.value = `thumbContainer`;
divThumb.setAttributeNode(id);
divThumb.setAttributeNode(divClass);
divThumb.style["width"] = `${newWidth}px`;
divThumb.style["height"] = `${newWidth*imageRatio}px`;
container.appendChild(divThumb);
let divSolid = document.createElement("div"); // SOLID COLOR
let divSolidClass = document.createAttribute("class");
divSolidClass.value = `solidColor`;
divSolid.setAttributeNode(divSolidClass);
divSolid.style.background = color;
divSolid.style["width"] = `${newWidth}px`;
divSolid.style["height"] = `${newWidth*imageRatio}px`;
divThumb.appendChild(divSolid);
}
};
html,
body {
background-color: #0B2161;
font-size: 100%;
margin: 0;
}
.mainGrid {
background: green;
display: flex;
flex-flow: row wrap;
}
.thumbContainer {
background: black;
position: relative;
}
.solidColor {
background-color: rgba(111, 33, 0, 1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* .oddBox { ??????????????????????????????????
background-color: rgba(248, 247, 216, 1);
}*/
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Example Odd Grid</title>
</head>
<body>
</body>
</html>