逐渐改变弹性项目的对齐方式

Question

假设我在弹性行中有x个项目。

flex-flow: row nowrap;

如何动态设置最左侧以向右对齐，并逐渐向右移动对齐，直到最右侧的项在右侧对齐。像这样举例如：

|Left    | Leftish   |  Middle  |   Rightish |    Right| 

无论行中的项目数是多少，我如何以动态/响应方式完成此操作？

这是我到目前为止所拥有的。它几乎是完美的，但并不完全。

https://jsfiddle.net/g6bbuj9s/

$(document).ready(function() {
  var labelChildren = $('#xAxisLabels').children().length
  var halfway = labelChildren / 2
  var counter = 1
  $('#xAxisLabels').children().each(function() {
    var child = $(this)
    if (counter == 1) {
      child.css("text-align", "left");
    } else if (counter > 1 & counter < halfway) {
      child.css("text-align", "left");
      child.css("text-indent", (((100 / labelChildren) * counter) - (counter * 9)) + "%");
    } else if (counter == halfway) {
      child.css("text-align", "center");
      child.css("justify-content", "center");
    } else if (counter == (halfway + .5)) {
      child.css("text-align", "center");
      child.css("justify-content", "center");
    } else if (counter > halfway & counter < labelChildren) {
      child.css("text-align", "right");
      child.css("direction", "rtl");
      child.css("text-indent", (((100 / labelChildren) * (counter % halfway)) - ((counter % halfway) * 9)) + "%");
    } else if (counter == labelChildren) {
      child.css("text-align", "right");
      child.css("justify-content", "right");
      child.css("display", "block");
    }
    counter += 1
  });
});

.flexitem {
  flex: 1;
  display: flex;
}

.flexrow {
  position: relative;
  flex-flow: row nowrap;
  display: flex;
}

.xAxis {
  max-width: 100%;
  width: 100%;
}

<div id="xAxisLabels" class="flexrow">
  <h5 class="flexitem xAxis">1</h5>
  <h5 class="flexitem xAxis">2</h5>
  <h5 class="flexitem xAxis">3</h5>
  <h5 class="flexitem xAxis">4</h5>
  <h5 class="flexitem xAxis">5</h5>
  <h5 class="flexitem xAxis">6</h5>
  <h5 class="flexitem xAxis">7</h5>
</div>