Блог

я хочу иметь следующую сетку элементов с использованием 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>
 

Вы можете разделить цикл на 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>
 

Вы можете увидеть пример кода здесь. Для динамических данных вы можете записать следующее.

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