调整大小时的动态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);
}

请原谅我凌乱的代码，但是那些与我面临同样问题的人希望这会有所帮助。