css - Flex：我如何设置项目以占用其容器的 MAX 1/3，除非它们的内容溢出

Question

假设我有一个 flex 容器，我想在其中显示 1 到 3 个项目。

我希望这些项目是：

• 默认为容器宽度的 1/3（即使只有 1 个项目）
• 如果其中一个项目的文本内容稍微扩展超过 33% 的宽度，我希望该项目尽可能扩大（即其他项目之一缩小）。
• 使用 flex-start 证明是合理的

.container {
  display: 'flex';
  flex-direction: 'row';
  background-color: 'red';
  width: '100%';
  justify-content: 'flex-start';
}

.item {
  flex: 1;
  border: 1px solid red;
  flex-wrap: 'no-wrap';
}

<div class="container">
    <div class="item">blahhhhhhhhhhhhhhhhhhhhhhhhhh</div>
    <div class="item">blahhh</div>
    <div class="item">blahhh</div>
</div>

<div class="container">
    <div class="item">I should take up 1/3</div>
</div>

以上适用于 3 项的情况，但是当将单个项目放置在那里时，它会扩展以填充空间。

这可能吗？

标签： cssflexbox

Answer 1

您可以为此使用 CSS-Grid。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 1em;
}

.item {
  height: 50px;
  border: 1px solid red;
}

.item.wide {
  width: 250px;
}

<div class="container">
  <div class="item wide"> I'm wider than 1/3</div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container">
  <div class="item"></div>
</div>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
</div>