时间戳

首页 > 解决方案 > Tailwind/Vue 动态地将弹性项目对齐到与邻居相同的高度

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

问题描述

我想使用 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>

标签： cssvue.jsflexboxtailwind-css

解决方案

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

<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>

推荐阅读