我正在嘗試在 Javascript 中創建一個 flexbox 以從我的 CMS 加載多個項目。應該有 3 個圖像代表每行的項目，因此我定義了一個具有 row wrap 屬性的 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>
flexbox javascript從cms動態加載
慕村225694
2021-10-29 15:00:00
