1

I am trying to achieve the words to be shared with same whitespace around. But not getting the solution. any one help me? in my try you can find the unordered space between word(s).

.parent{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width:80%;
  border:1px solid red;
}

.parent span{
  background: lightblue;
}
<div class="parent">
 <span>one text</span>
 <span>small</span>
 <span>lengthy texter than one</span>
 <span>medium text two</span>
 <span>one</span>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
user2024080
  • 1
  • 14
  • 56
  • 96

1 Answers1

0

Please update your code like this:

.parent{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; /* important */
  width:80%;
  border:1px solid red;
}

.parent span{
  background: lightblue;
}
<div class="parent">
 <span>one text</span>
 <span>small</span>
 <span>lengthy texter than one</span>
 <span>medium text two</span>
 <span>one</span>
</div>
3gwebtrain
  • 14,640
  • 25
  • 121
  • 247