1

Lets say I have x number of Items in a flex row. 

flex-flow: row nowrap;

How can I dynamically set the leftmost side to justify to the left, and gradually shift the justification right until the rightmost item is justified on the right. Like this for example:

|Left    | Leftish   |  Middle  |   Rightish |    Right|

How can I accomplish this in a dynamic/responsive manner regardless of the number of items in the row?

This is what I have so far. It's almost perfect, but not quite.

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Avir94
  • 899
  • 9
  • 19
  • You can't do that fully dynamic, so are we talking about 5-10 items or it can be 20-30-40? – Asons Apr 18 '17 at 16:51
  • probably 5-10 items – Avir94 Apr 18 '17 at 16:52
  • Then I suggest you study [**this post**](http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has), as it shows a way to _count_ items. This is probably the closest you can get without using script – Asons Apr 18 '17 at 16:54
  • Also this article might be helpful: https://css-tricks.com/useful-nth-child-recipies/ – Asons Apr 18 '17 at 16:57
  • 1
    Getting the first and last items to align properly is no problem with CSS. Getting the middle item to center content is no problem with CSS, if the item can be identified. For the items between left and middle, and middle and right, you'll probably need JS. Here's a demo without the JS: https://jsfiddle.net/8ooj2uph/1 – Michael Benjamin Apr 18 '17 at 17:49
  • Thank you #Michael_B, that is cleaner, but I guess my question would be what is the best way to determine how much of a left or right indent to put? Cause that is determinate on the text that is in there, so that makes it harder. – Avir94 Apr 18 '17 at 18:08

0 Answers0