时间戳

首页 > 解决方案 > 如何让动态内容居中且宽度相同的孩子与flex？

css - 如何让动态内容居中且宽度相同的孩子与flex？

问题描述

好吧，所以，我知道这是一个很长的镜头，但你永远不知道，所以我还是会问。

我有一个 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 一起工作。

非常感谢。

标签： cssflexbox

解决方案

您是否考虑过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>

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

推荐阅读