How to get space-between behavior on multiple lines, with text lined up to left and right edges of my container

Question

I'm scratching my head around trying to reproduce this, apparently, simple template:

I found tons of answer quite reproducing this (like here), but it never fits my needs because:

I want my text to touch borders of the container. (Kind like first text of a line aligned to the left, and last text of line aligned to the right, but keeping same spacing between text)
I don't want to use a wrapper per line (but I'm not limited in terms of wrapper per item), because number of item per line can change on window resize.
Need to works on IE11

Here an example, I'd like the number 6 to be "stuck" to the right border and keep equal spacing.

.container{
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  width: 300px;
  flex-wrap: wrap;
}

.container::after {
  content: "";
  flex: auto;
}

p{
  min-width: 16.666%;
}

<div class="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

Above the correct visual result but it use lines container, which I don't want.

.container{
  border: 1px solid red;
  width: 300px;
}


.line{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.line:last-child {
  justify-content: flex-start;
}


.line:last-child  p{
  width: 16.6666%;
}

<div class="container">
  <div class="line">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
  <div class="line">
    <p>7</p>
    <p>8</p>
    <p>9</p>
  </div>
</div>

For information, grid's solution tested weren't working on IE11, like this one:

.container{
  border: 1px solid red;
  display: grid;
  grid-template-columns:repeat(6,auto);
  justify-content: space-between;
  width: 300px;
}

<div class="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

*I'd like the number 6 to be "stuck" to the right border and keep equal spacing* --> it's already the case if you inspect the element — Temani Afif, Dec 03 '19 at 10:26
@TemaniAfif No, the `
` stuck the right border, not the number `6`, it would if it was `text-align: right`, but then equal spacing would be lost. Please look at the screen given in the description to understand the expected visual result — Allan Raquin, Dec 03 '19 at 10:30
Not wanting to use a wrapper per line, but being open to using an unlimited number of wrappers per item seems rather arbitrary to me. How many items will you have per line... always 6? If yes then why not just settle for the solution that you already have that works? Also, related problem w/ JS solutions: https://stackoverflow.com/questions/4355009/css-text-justify-with-letter-spacing — TylerH, Dec 03 '19 at 15:49
@TylerH That's the point, number of items isn't always 6. It could vary depending on the screen size. Thanks for the JS alternative, that would probably be an option if no other is available using only css. — Allan Raquin, Dec 03 '19 at 19:59

score 0 · Accepted Answer · answered Dec 03 '19 at 20:51

I found a solution using negative margin.

It does the trick when items have similar width, which was my case.

Open in full window the above code snippet. I added some breakpoints to show that it can handle an increase/decrease of number of item per line.

.c{
   border: 1px solid red;
    width: 50%;
}

.container{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 -9.2%;
}
@media screen and (max-width: 900px)  {
  .container{
    margin: 0 -11.5%;
  }
}
@media screen and (max-width: 600px)  {
  .container{
    margin: 0 -15%;
  }
}
@media screen and (max-width: 400px)  {
  .container{
    margin: 0 -22%;
  }
}


.container::after {
  content: "";
  flex: auto;
}

p{
  text-align: center;
  min-width: 16.666%;
}

@media screen and (max-width: 900px)  {
  p{
    min-width: 20%;
  }
}
@media screen and (max-width: 600px)  {
  p{
    min-width: 25%;
  }
}
@media screen and (max-width: 400px)  {
  p{
    min-width: 33.333%;
  }
}

<div class="c">
  <div class="container">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
</div>

How to get space-between behavior on multiple lines, with text lined up to left and right edges of my container

1 Answers1