Q: Align strings among themselves using flexbox I've got a container with some infos within. I use flexbox to display it in a row and justify-content: space-between; for using the whole space of the container from start to end. This works fine. The only problem I got is, that the strings dont align among themselves. I tried to set flex-basis: 0px; on .info, but it didn't help. Any ideas?


.container {
  display: flex;
  justify-content: space-between;
  background-color: lightgreen;
  margin-bottom: 5px;
}

.info {
  /* flex-basis: 0px; */
  /* didn't help */
}
<div class="container">
  <div class="info">Switzerland</div>
  <div class="info">Norway</div>
  <div class="info">Serbia</div>
  <div class="info">Great Britain</div>
</div>

<div class="container">
  <div class="info">Zurich</div>
  <div class="info">Oslo</div>
  <div class="info">Belgrade</div>
  <div class="info">London</div>
</div>



A: Add the shorthand flex rule to the .info elements and set it to 1, which will give them the ability to grow.

flex
The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.



.container {
  display: flex;
  justify-content: space-between;
  background-color: lightgreen;
  margin-bottom: 5px;
}

.info {
  flex: 1;
}
<div class="container">
  <div class="info">Switzerland</div>
  <div class="info">Norway</div>
  <div class="info">Serbia</div>
  <div class="info">Great Britain</div>
</div>

<div class="container">
  <div class="info">Zurich</div>
  <div class="info">Oslo</div>
  <div class="info">Belgrade</div>
  <div class="info">London</div>
</div>



A: You need to give a minimum width so that the flex doesn't use the width of the strings.


.container {
  display: flex;
  justify-content: space-between;
  background-color: lightgreen;
  margin-bottom: 5px;
}

.info {
  /* flex-basis: 0px; */
  /* didn't help */
  min-width: 100px;
}
<div class="container">
  <div class="info">Switzerland</div>
  <div class="info">Norway</div>
  <div class="info">Serbia</div>
  <div class="info">Great Britain</div>
</div>

<div class="container">
  <div class="info">Zurich</div>
  <div class="info">Oslo</div>
  <div class="info">Belgrade</div>
  <div class="info">London</div>
</div>


