是否可以在 flexbox 项目之间创建灵活的间距？

Question

我正在尝试创建一个在项目之间具有灵活间距的水平导航菜单。 Flexbox 似乎是合适的选择，但我无法让它按我的预期工作。

要求是：

• 如果有足够的可用空间，则在每个项目之间留出 4rems 的空间
• 随着视口宽度的减小，均匀地缩小项目之间的空间，最小为 2rem
• 如果视口宽度进一步减小，则保持 2rem 间距并缩小项目本身

我希望它能够容纳可变数量的项目（会有一个最大值）。

我得到的最接近的方法是在项目上使用 2rem 填充，然后使项目本身成为弹性容器，并缩小伪元素，但缩小非常不均匀。

HTML

<div class="container">
  <div class="item">
    Item 1
  </div>
  <div class="item">
    Item 2
  </div>
  <div class="item">
    Item 3 With Long Name
  </div>
  <div class="item">
    Item4WithLongNameNoSpaces
  </div>
  <div class="item">
    Item 5
  </div>
</div>

CSS

.container {
  display: flex;
}

.item + .item {
  display: flex;
  padding-left: 2rem;
}

.item + .item:before {
  content: "";
  display: block;
  width: 2rem;
  flex-shrink: 1000;
}

Codepen：https://codepen.io/qubaji/pen/PoZLEbW

如果我能找到 flex-grow/flex-shrink 值的正确组合，似乎 flexbox 可以做到这一点，但我不能完全做到。非常感谢任何帮助！

Answer 1

我会考虑 display:contents 让您的伪元素与弹性项目处于同一级别，但这可能会限制您可以应用于项目的 CSS：

.container {
  display: flex;
  outline:1px solid red;
}

.item {
  display: contents;
}

.item + .item::before {
  content: "";
  width: 4rem;
  min-width:2rem;
  flex-shrink:9999;
  outline:1px solid green;
}

<div class="container">
  <div class="item">
    Item 1
  </div>
  <div class="item">
    Item 2
  </div>
  <div class="item">
    Item 3 With Long Name
  </div>
  <div class="item">
    Item4WithLong
  </div>
  <div class="item">
    Item 5
  </div>
</div>

既然你说你的元素将被限制在一个最大数量，这里是一个 CSS 网格的想法：

/* extra container to hide the overflow */
.wrapper {
  overflow:hidden; 
  outline:1px solid red;
}
/**/
.container {
  display: inline-grid;
  vertical-align:top;
  /* the item will take only the auto (even columns)
     the 1fr will define the shrinkable gap
  */
  grid-auto-columns:1fr auto; 
  justify-content:flex-start;
  grid-auto-flow:column; /* column flow */
  margin-left:-2rem; /* to hide the pseudo element */
}
/* this will define the size if the 1fr */
.container:before {
  content:"";
  width:2rem;
}
/* */

.item + .item {
  padding-left:2rem; /* the fixed gap */
}

/* you can easily generate the below using SASS/Less*/
.item:nth-child(1) {grid-column:2}
.item:nth-child(2) {grid-column:4}
.item:nth-child(3) {grid-column:6}
.item:nth-child(4) {grid-column:8}
.item:nth-child(5) {grid-column:10}
.item:nth-child(6) {grid-column:12}
.item:nth-child(7) {grid-column:14}
.item:nth-child(8) {grid-column:16}
.item:nth-child(9) {grid-column:18}
.item:nth-child(10) {grid-column:20}

<div class="wrapper">
  <div class="container">
    <div class="item">
      Item 1
    </div>
    <div class="item">
    Item 2
  </div>
    <div class="item">
      Item 3 With Long Name
    </div>
    <div class="item">
      Item4WithLong
    </div>
    <div class="item">
      Item 5
    </div>
  </div>
</div>

Answer 2

Warden330 建议的使用间隔 div 的可能解决方案（或近似值）。

.container {
  display: flex;
  justify-content: center;
}
.item {
  white-space: nowrap;
}
.spacer {
  min-width: 2rem;
  max-width: 4rem;
  width: 100%;
  flex-shrink: 2;
}

<div class="container">
  <div class="item">
    Item 1
  </div>
  <div class="spacer"></div>
  <div class="item">
    Item 2
  </div>
  <div class="spacer"></div>
  <div class="item">
    Item 3 With Long Name
  </div>
  <div class="spacer"></div>
  <div class="item">
    Item4WithLongNameNoSpaces
  </div>
  <div class="spacer"></div>
  <div class="item">
    Item 5
  </div>
</div>