How to equally size spans with flex?

Question

div {
  display: inline-flex;
  border: 1px solid red;
}

div span {
  flex: 1 1 auto;
  border: 1px solid blue;
}

<div>
  <span>&laquo;</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>&hellip;</span>
  <span>998</span>
  <span>999</span>
  <span>1000</span>
  <span>&raquo;</span>
</div>

I'd like the spans to automatically grow equally to the largest elements width. I'd also like to use flex since I don't know in advance how many <span>s I'll end up with.

If I add width: 100%; to the <div> the behaviour essentially works, but the overall component becomes much wider than it'd need to be.

I've also tried adding display: inline-block; to the <span>s to no avail.

How do I make my spans grow to equal width but no wider?

display:inline-grid; grid-auto-columns:1fr; grid-auto-flow:column to parent element (I know the duplicate, will search for it) — Temani Afif, Nov 15 '21 at 14:35

score -1 · Answer 1 · answered Nov 15 '21 at 14:53

Use the display flex for parents also. you can give fixed-width manually, or it will divide the available space equally.

div {
  display:flex;
}

div span {
  flex:1;
  border: 1px solid blue;
  text-align:center;
}

<div>
  <span>&laquo;</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>&hellip;</span>
  <span>998</span>
  <span>999</span>
  <span>1000</span>
  <span>&raquo;</span>
</div>

How to equally size spans with flex?

1 Answers1