[Vuejs]-Image should take remaining place (Vue/Tailwind/Flex)

by

0👍

You can do this in many ways. Flexboxes are good approach, but for for thumbnails images I would use grid to make them even (but sure flexboxes can by used as well).

It does not matter if you use SVG or not for buttons. But if you have any problem with them – please provide real reproduction example (https://play.tailwindcss.com/ can be usefully).

Demo: https://play.tailwindcss.com/RsXsrdSYG3

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="min-h-screen bg-gray-50 p-8 flex flex-col">
  <div class="flex items-center">
    <button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
    <div class="px-6">
      <img src="https://via.placeholder.com/1920x1080" />
    </div>
    <button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
  </div>
  <div class="mt-6 grid grid-cols-3 gap-6">
    <img src="https://via.placeholder.com/1920x1080" />
    <img src="https://via.placeholder.com/1920x1080" />
    <img src="https://via.placeholder.com/1920x1080" />
  </div>
</div>

Or if you want to fill screen height (but empty space will be visible over big image to keep responsive ratio).

Demo: https://play.tailwindcss.com/hTYuGjPHHk

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="h-screen bg-gray-50 p-8 flex flex-col">
  <div class="flex items-center flex-1">
    <button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
    <div class="px-6 h-full flex items-center">
      <img src="https://via.placeholder.com/1920x1080" />
    </div>
    <button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
  </div>
  <div class="mt-6 grid grid-cols-3 gap-6">
    <img src="https://via.placeholder.com/1920x1080" />
    <img src="https://via.placeholder.com/1920x1080" />
    <img src="https://via.placeholder.com/1920x1080" />
  </div>
</div>

Leave a comment