Tailwind/Vue 动态地将弹性项目对齐到与邻居相同的高度

Posted 2023-03-07

【中文标题】Tailwind/Vue 动态地将弹性项目对齐到与邻居相同的高度

【英文标题】：Tailwind/Vue dynamicaly align flex items to same high as neighbor

【发布时间】：2021-07-13 16:46:20

【问题描述】：

我想使用 flex、tailwind 和 vue 拥有以下元素网格：

我从后端获得了很多项目，我想在一个 flex 容器中并排显示每个项目，但一行中只有 2 个项目。这应该很容易通过 justify-between 和 w-1/2 为每个项目实现。但下一个要求是，彼此相邻的项目与内容多于另一个的项目具有相同的高度。高度现在固定在这里，只有边距。我怎样才能做到这一点？ 我得到了一种类似的方法，但不是动态数量的项目，只有固定数量的项目。但是当我不知道我会得到多少物品时，我怎么能做到这一点呢？

我目前的做法：

<div class="mt-3 flex flex-row flex-1 flex-wrap justify-between">
  <div v-for="item in items"  class="w-1/2 mt-1.5">
    <div
      class="border border-solid rounded-lg border-black border-opacity-10"
    >
    The content for each item belongs here
     </div>
      </div>
    </div>

【参考方案1】：

您可以将循环分块为 2，然后执行以下操作。见demo。

<div class="p-4 space-y-4">
  <div class="flex space-x-4">
    <div class="flex w-1/2 border p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum assumenda eaque veritatis, porro culpa reprehenderit nisi. Iusto labore ex culpa excepturi velit eos a consequatur beatae aliquam, vero quidem ut.Beatae dolores eligendi accusantium delectus fugiat ex iure vero quam doloribus quo sapiente, necessitatibus fuga! Voluptatibus eaque aut quis omnis magni dolorum iusto delectus laborum, nesciunt id quia praesentium rerum?</div>
    <div class="flex w-1/2 border p-4">small content</div>
  </div>

  <div class="flex space-x-4">
    <div class="flex w-1/2 border p-4">small content</div>
    <div class="flex w-1/2 border p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni ut quod voluptas nisi modi perspiciatis aliquid ad tempora cum corporis sapiente blanditiis dicta, esse reiciendis sed eveniet, libero, dignissimos perferendis.</div>
  </div>

  <div class="flex space-x-4">
    <div class="flex w-1/2 border p-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates eum saepe natus, numquam quibusdam praesentium, incidunt debitis at, nihil similique quidem doloribus? Natus delectus vero quidem, autem fugiat amet odit. Maxime dolorum nostrum vitae adipisci, exercitationem corporis iure, repellat sunt quidem numquam voluptatem beatae dignissimos aliquid suscipit laboriosam modi quibusdam excepturi possimus voluptatibus voluptas deleniti maiores saepe atque doloremque. Totam. Fuga dignissimos ducimus dicta pariatur temporibus dolor commodi soluta. Expedita neque hic explicabo deleniti laudantium animi nesciunt aut vero. Deserunt, sint. Deleniti illum optio rem unde placeat ab eos fuga. Cumque illum odio, consequuntur repudiandae quis error fugit deserunt velit modi illo soluta nihil architecto, ex cum nesciunt, ad laboriosam. Ex nihil unde modi facere quibusdam, nesciunt quod aliquid voluptatum.</div>
    <div class="flex w-1/2 border p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni ut quod voluptas nisi modi perspiciatis aliquid ad tempora cum corporis sapiente blanditiis dicta, esse reiciendis sed eveniet, libero, dignissimos perferendis.</div>
  </div>
</div>

【讨论】：

谢谢，布局看起来正是我想要的样子！但是使用您的解决方案，我很难遍历我的项目以实现精确的布局？因为在每两个项目之后，我需要在我的 <div class="flex w-1/2 border p-4"> 项目周围放置另一个 <div class="flex space-x-4"> 包装器

您好，我用两个单独的数组和一个索引 v-for 循环修复了这个问题。谢谢！ :)

【参考方案2】：

您可以看到示例代码here。 对于动态数据，可以这样写。

<div class="grid grid-cols-2">
  <div v-for="item in items">
   <div class="border p-4 rounded-lg m-3">
    A lot content
   </div>
  </div>
</div>

【讨论】：

谢谢！这给了我正确的布局，并且正在处理我的迭代。但是有一些陷阱：是否可以使用 flex 来构建我的项目？因为如果我在我的项目中使用任何 flex，网格容器的并排高度不再起作用。例如，我将以下 <div class="flex border p-4 rounded-lg m-3"> 用于我的项目而不是 <div class="border p-4 rounded-lg m-3"> 高度不再与我的并排项目对齐。

您可以在 div 标签中添加 flex 类。在我的代码示例中添加 flex 类后，该错误不会发生。高度与并排项目对齐。你可以看here。

由于某种原因，这不适用于我的完整代码。但我知道它与上述接受的解决方案一起工作。谢谢！