CSS grid/flex 根据内容收缩但均匀增长

Question

我正在为我的应用程序构建一个导航栏。我想让我的物品根据其内容缩小，但根据平均大小增长。

我想要的只是：

• 如果有足够的空间容纳所有项目的 max-content-size，我希望所有项目的大小均匀。
• 如果有足够的空间容纳所有项目的最小内容，我希望项目根据其内容缩小。
• 如果没有足够的空间容纳所有项目的最小内容，我希望它们根据其内容进一步缩小，这样最大的项目首先开始缩小，直到它与第二大的项目一样大，然后两者都缩小开始缩小

我可以使用网格或柔性来做到这一点。 不幸的是，我无法得到预期的行为，因为它们要么根据内容增长（而不是根据平均大小），要么根据平均大小而不是根据内容收缩。我包含了一个包含两个示例实现的片段。

body {
  margin: 0;
  font-family: Verdana;
}

.small {
  width: 400px;
}

.medium {
  width: 800px;
}

.large {
  width: 1200px;
}

.container-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  border: 1px solid black;
}

.item-flex {
  display: flex;
  flex-direction: column;
  flex-basis: auto;
  flex-shrink: 1;
  flex-grow: 1;
  overflow: hidden;
  padding: 20px;
  background-color: green;
  border: 1px solid red;
  min-width: 0;
}

.title {
  background-color: white;
  flex-grow:0;
  text-align: center;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.container-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  border: 1px solid black;
}

.item-grid {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
  background-color: green;
  border: 1px solid red;
  min-width: 0;
}

<div class="small">
<h2>Small</h2>
<h4>Flex</h4>
<div class="container-flex">
<div class="item-flex">
<div class="title">Title</div>
</div>
<div class="item-flex">
<div class="title">Long Title</div>
</div>
<div class="item-flex">
<div class="title">Even longer Title</div>
</div>
<div class="item-flex">
<div class="title">Title</div>
</div>
</div>
<h4>Grid</h4>
<div class="container-grid">
<div class="item-grid">
<div class="title">Title</div>
</div>
<div class="item-grid">
<div class="title">Long Title</div>
</div>
<div class="item-grid">
<div class="title">Even longer Title</div>
</div>
<div class="item-grid">
<div class="title">Title</div>
</div>
</div>
</div>
<div class="medium">
<h2>Medium</h2>
<h4>Flex</h4>
<div class="container-flex">
<div class="item-flex">
<div class="title">Title</div>
</div>
<div class="item-flex">
<div class="title">Long Title</div>
</div>
<div class="item-flex">
<div class="title">Even longer Title</div>
</div>
<div class="item-flex">
<div class="title">Title</div>
</div>
</div>
<h4>Grid</h4>
<div class="container-grid">
<div class="item-grid">
<div class="title">Title</div>
</div>
<div class="item-grid">
<div class="title">Long Title</div>
</div>
<div class="item-grid">
<div class="title">Even longer Title</div>
</div>
<div class="item-grid">
<div class="title">Title</div>
</div>
</div>
</div>
<div class="large">
<h2>Large</h2>
<h4>Flex</h4>
<div class="container-flex">
<div class="item-flex">
<div class="title">Title</div>
</div>
<div class="item-flex">
<div class="title">Long Title</div>
</div>
<div class="item-flex">
<div class="title">Even longer Title</div>
</div>
<div class="item-flex">
<div class="title">Title</div>
</div>
</div>
<h4>Grid</h4>
<div class="container-grid">
<div class="item-grid">
<div class="title">Title</div>
</div>
<div class="item-grid">
<div class="title">Long Title</div>
</div>
<div class="item-grid">
<div class="title">Even longer Title</div>
</div>
<div class="item-grid">
<div class="title">Title</div>
</div>
</div>
</div>

Answer 1

对于 3 种不同的容器行为，您需要更改卡片的特征。

“小容器卡”需要

max-width

和

overflow: hidden

和

text-overflow: ellipsis

。

“中型容器卡”需要

min-width

并且默认禁用

flex-shrink

“大容器卡”需要预设宽度，使其宽度相等：

.container {
  display: flex;
  width: 100%;
}

.container > * {
  box-shadow: inset 0 0 0 0.5em rgba(0, 200, 0, 0.6);
  border: 1px dashed red;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

.sm > * {
  max-width: 5em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md > * {
  min-width: 3em;
  flex-shrink: 0;
}

.lg > * {
  box-sizing: border-box;
  width: 25%;
}

<h3>small</h3>

<div class="container sm">
  <div>Title</div>
  <div>Long Title</div>
  <div>Even longer Title</div>
  <div>Title</div>
</div>

<h3>medium</h3>

<div class="container md">
  <div>Title</div>
  <div>Long Title</div>
  <div>Even longer Title</div>
  <div>Title</div>
</div>

<h3>large</h3>

<div class="container lg">
  <div>Title</div>
  <div>Long Title</div>
  <div>Even longer Title</div>
  <div>Title</div>
</div>