如何使用 flex 来调整 span 的大小？ [复制]答案

【问题标题】：How to equally size spans with flex? [duplicate]如何使用 flex 来调整 span 的大小？ [复制]
【发布时间】：2021-12-26 18:07:34
【问题描述】：

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>

我希望跨度自动增长到最大元素宽度。我也想使用flex，因为我事先不知道我最终会得到多少<span>。

如果我将 width: 100%; 添加到 <div> 中，该行为基本上可以正常工作，但整个组件变得比它需要的要宽得多。

我也尝试将display: inline-block; 添加到<span>s 中，但无济于事。

如何使跨度增长到等宽但不变宽？

【问题讨论】：

显示：内联网格；网格自动列：1fr； grid-auto-flow:column to parent element（我知道重复的，会搜索它）
stackoverflow.com/a/48010604/8620333

标签： css flexbox

【解决方案1】：

也为父母使用 display flex。您可以手动给定宽度，否则它将平均分配可用空间。

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>

【讨论】：