調整大小時的動態Flex項目

Question

這里是新的Web開發人員，如果可能的話，僅使用純JS構建日歷。

到目前為止： https : //jsfiddle.net/q7h3fm9c/ ，我只知道溢出時會包裝元素，如何以響應方式“破壞”和“創建”新節點，這樣只有1行最佳數量的節點？ 這是手動創建節點的位：

for(var i = 0; i < 4; i++) addNewDayObject(i, "lel", "lel", 2015)

我在嘗試搜索解決方案時遇到了媒體查詢，但是我非常希望不要硬編碼寬度值來觸發代碼，因為flex-items具有動態寬度。

Answer 1

如果只需要“隱藏”連續的行，則可以將容器div的height元素設置為僅顯示一行。 只要高度固定就可以。

請在這里看我的小提琴。

CSS

#dayObjContainer {
    max-height: 124px; /* max height here*/
    overflow: hidden;
    padding-bottom: 5px;
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
}
.dayObj {
    padding: 10px 0px;
    width: 250px;
    color: #FFF5AA;
    background-color: #D4C96A;
    text-align: center;
    margin: 0px 5px 5px; /* added bottom margin here */
    box-shadow: 2px 2px 5px #888888;
}

Answer 2

我發現window.onresize，一切都解決了。 javascript +瀏覽器是否具有列出我可以使用的所有方法和屬性的文檔？ 猜猜工作和Google對我來說有點慢了：\\

window.onload = init;
var dayObjTemplate;
var containerRef;
var objCount = 0;
function init() {
  dayObjTemplate = document.getElementById("obj0");
  containerRef = dayObjTemplate.parentNode;
  dayObjTemplate.parentNode.removeChild(dayObjTemplate);
  // capture day object template and remove from DOM

  for(var i = 0; i < 1; i++) addNewDayObject(11, 8, 2015)

  window.onresize = function updateNewContainerWidth(argument) {
    var conWdt = containerRef.offsetWidth;
    while(objCount < Math.floor(conWdt / (250+5))) {
      addNewDayObject(11, 8, 2015);
    }
    while(objCount > 1 && objCount > Math.floor(conWdt/(250+5))) {
      removeLastDayObject();
    }
  }
}

function removeLastDayObject() {
  containerRef.removeChild(document.getElementById("obj"+objCount));
  objCount--;
}

function addNewDayObject(day, month, year) {
  var d = new Date(year, month, day);
  var dayNames=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

  objCount++;
  var clone = dayObjTemplate.cloneNode(true);
  clone.id = "obj" + objCount;
  clone.getElementsByClassName("dayObjDayLabel")[0].innerHTML = dayNames[d.getDay() - 1];
  clone.getElementsByClassName("dayObjNumLabel")[0].innerHTML = day;
  clone.getElementsByClassName("dayObjMYLabel")[0].innerHTML = month + ", " + year

  document.getElementById("dayObjContainer").appendChild(clone);
}

請原諒我凌亂的代碼，但是那些與我面臨同樣問題的人希望這會有所幫助。