如何让孩子以动态内容为中心，并使用flex获得相同的宽度

Question

好吧，我知道这是一个很长的机会，但你永远不会知道，所以我无论如何都会问。

我有一个flex容器，它显示4个项目，这些项目的内容是动态生成的(在数据库中拾取(。这意味着我不知道它们里面是什么。我只知道这是一些有一定最大长度的文本。所以我基本上有这样的东西：

#container {
display: flex;
justify-content: center;
}
.item {
margin: 0 5px;
background-color: yellow;
}

<div id="container">
<div class="item">Content</div>
<div class="item">Long item content</div>
<div class="item">Short</div>
<div class="item">Other content</div>
</div>

我希望所有的物品都是相同的尺寸，这将是其中最大的一个(这里是第二个(的尺寸，并有这样的东西：

#container {
position: absolute;
display: flex;
justify-content: center;
width: 85%;
left: 50%;
transform: translateX(-50%);
}
.item {
margin: 0 5px;
background-color: yellow;
flex: 1 1 0;
text-align: center;
}

<div id="container">
<div class="item">Content</div>
<div class="item">Long item content</div>
<div class="item">Short</div>
<div class="item">Other content</div>
</div>

但当然不会影响容器的宽度和位置。我希望容器的宽度为100%，并且子对象可以调整其大小以获得此渲染。

有人知道怎么做吗？

顺便说一句，我在Angular工作。

非常感谢。

Answer 1

您是否考虑过使用display: grid？

#container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 4px;
grid-row-gap: 4px;
}
.item {
padding: 4px;
background-color: #aaaa00;
text-align: center;
}

<div id="container">
<div class="item">Content</div>
<div class="item">Long item content</div>
<div class="item">Short</div>
<div class="item">Other content</div>
<div class="item">fifth element</div>
</div>

添加了第五个元素，显示网格布局受到其他元素的尊重。