ReactJs / Flex-box 在三的倍数之间对齐

Posted 2023-03-07

【中文标题】ReactJs / Flex-box 在三的倍数之间对齐

【英文标题】：ReactJs / Flex-box justify between on multiples of three

【发布时间】：2021-08-28 02:01:43

【问题描述】：

似乎每次我开始认为我掌握了 flex-box 时，我最终都会尝试创建一些我似乎无法弄清楚的东西。我的网站上有一个部分，我希望用户能够动态上传图像。我让 React 为这个组件工作，因此一旦上传了图像，就会出现上传新图像的选项。我正计划通过容器传播 3 个图像，并在添加更多图像时包装一次。为了做到这一点，我使用了一个带有 flex-wrap 和 justify-between 的 flex 行（在边缘对齐）。

我遇到的问题是在每行所需的数字之间有一个数字（例如 2、5、8、...），之间的对齐会导致项目在容器中拆分。这显然不是理想的行为，但过去几个小时我一直在努力修复它，并希望得到一些指导。

为了解决这个问题，我尝试使用 CSS Grid，但无法获得所需的行为，通常只是让元素全部对齐到它们各自网格单元的开头，我无法找到修复这个。

我觉得这应该可以使用纯 CSS 实现，但无论如何我都希望以其他方式显示！

这是我目前得到的行为示例：

以及 flex-grid 未按需要对齐列中的项目（左、中、右）问题的图像。

我的问题代码的 sn-p 是：

    <div className="w-full">
        <div className="w-full flex flex-wrap justify-between">
            images.map((imageUrl, index) => (
                <ImageUpload /> * Used to display existing uploaded images *
            ))
            <ImageUpload /> * Used as a new upload element *
        </div>
    </div>

也可以在这里查看 CodePen：https://codepen.io/developerryan/pen/GRWYKOm

【问题讨论】：

请用占位符图像创建一个简短的工作小提琴来演示该问题。提供的代码不够imo。

我认为这对于 CSS 网格应该是可行的......所以你基本上需要一个 3 列布局，其中图像应该采用各自列中可用的所有宽度，并且行应该基于图片的数量？

@Akash 我认为这听起来是正确的。但是，我无法让它与带有图像的弹性框一起使用。当我设置w-full 时，它只是出于某种原因折叠了容器。

我已经在这里创建了一个 Codepen：codepen.io/developerryan/pen/GRWYKOm@Mr_Green

【参考方案1】：

我们可以对包含图像的父元素使用网格框。像这样的：

.parent-element 
  display: grid;
  grid-template-columns: repeat(3, 150px);

.parent-element 
  display: grid;
  grid-template-columns: repeat(3, 150px);
  justify-content: space-between;

<div class="w-full p-4">
  <div class="flex flex-col w-full h-full justify-between bg-gray-100">
    <div class="parent-element w-full flex flex-wrap justify-between">
      <img src="https://via.placeholder.com/150x250" w="150" h="250" />
      <img src="https://via.placeholder.com/150x250" w="150" h="250" />
      <!--  Add images to see how it changes  -->
      <!--  Ideal behavior is to have 2 items space similar to 3 with 2nd item sit where the second does with 3 items -->
    </div>
  </div>
</div>