Javascript 将浏览器的大小调整为1.5（组件）时调用函数

我有一个函数，它获取父div的宽度，并计算子元素的总宽度。如果父元素的宽度大于所有子元素的总宽度，它将应用css类。它可以在页面加载时工作——但现在我正试图弄清楚如何在浏览器调整大小时工作

这是我在控制器中的功能

public setCenterClass() {

    let parent =  document.querySelectorAll(".container")[0];
    let parentWidth = parent.clientWidth;
    let children = parent.children;
    let childrenWidth = 0;

    for (let i = 0; i < children.length; i++) {
        childrenWidth += children[i].offsetWidth;
    }

    if (parentWidth > childrenWidth) {
        return 'center-content';
    }

    return;
}

我从家长处这样称呼它

<div class="container" ng-class="$ctrl.setCenterClass()" >...

这是可行的，但如果有更好的方法，请告诉我：

---

调整浏览器大小时调用setCenterClass的最佳方式是什么？我看到的所有示例似乎都使用指令。我正在使用Angular 1.5和组件以及typescript。谢谢。

这并不是你真正想要的，但我还是要说：我认为你应该使用flexbox+justify内容。每次用户调整屏幕大小时调用函数是不好的，在ng类中调用函数的性能更差，因为每次模型更改时都会调用该函数

使用flexbox，您可以执行以下操作：

<div id="container">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
</div>

这样，如果子对象都位于父对象内部，则它们将居中并隔开，但如果它们溢出父对象，则将可滚动

---

下面是一个

为什么需要在javascript中执行此操作？我会使用CSS，结合媒体查询来检查屏幕宽度，并使用flexbox来设置子项宽度和对齐方式。事实上，现在我更好地阅读了你的问题，只使用flexbox就可以了：你可以根据你的类“中心内容”的功能使用justify content:center或justify content:space，如果子项比父项大，不会有任何视觉效果。谢谢汉克。我已经在用flex了。问题是可以有任意数量的子元素。因此，当子元素可以容纳在父元素中时，我希望将其居中。如果它们没有，那么它们将左对齐，并且父对象将成为可滚动的。哈哈！很酷，谢谢。我会玩一会儿。就在昨天我试过这个。。。

#container{
  height:800px;
  width:1200px;
  overflow-x:scroll;

  display: -webkit-box;
  display:flex;
  justify-content:space-around;
}

.box{
  height:300px;
  flex:0 0 300px;
}