Question

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

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
  background-color: lightgreen;
  margin-bottom: 5px;
}

.info {
  /* flex-basis: 0px; */
  /* didn't help */
}

＆＃13;

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

＆＃13;

Answer 1

将简写flex规则添加到.info元素并将其设置为1，这将使他们能够成长。

flex

flex CSS属性是一个速记属性，指定弹性项目改变其尺寸以填充可用空间的能力。 Flex项目可以拉伸，以使用与其弹性增长系数或弹性收缩系数成比例的可用空间，以防止溢出。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要给出最小宽度，以便flex不会使用字符串的宽度。

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
  background-color: lightgreen;
  margin-bottom: 5px;
}

.info {
  /* flex-basis: 0px; */
  /* didn't help */
  min-width: 100px;
}

＆＃13;

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

＆＃13;

使用flexbox将字符串对齐

2 个答案:

flex