html - 使用flexbox在字符串之间对齐

我有一个容器，里面有一些信息。我使用flexbox将其连续显示，并使用justify-content: space-between;从头到尾使用容器的整个空间。这很好。我得到的唯一问题是，字符串之间没有对齐。我试图在flex-basis: 0px;上设置.info，但这没有帮助。有任何想法吗？

.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>

最佳答案

将速记flex规则添加到.info元素并将其设置为1，这将使它们具有增长的能力。


  flex
  
  flex CSS属性是一种简写属性，用于指定flex项目更改其尺寸以填充可用空间的能力。可以拉伸弹性项目以使用与其弹性增长因子或弹性收缩因子成比例的可用空间，以防止溢出。

.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>