0

    <div class="flex flex-wrap items-baseline">
      <div class="h-10 basis-1/2 border bg-orange-500">hello1</div>
      <div class="h-40 basis-1/2 border bg-amber-700">hello4</div>
      <div class="h-20 basis-1/2 border bg-yellow-500">hello2</div>
      <div class="h-30 basis-1/2 border bg-green-800">hello3</div>
    </div>

problem preview image: https://i.ibb.co/SK6zPCv/image.png

code: https://play.tailwindcss.com/AI0Uo1vVsT

Shourov Ys
  • 63
  • 6

3 Answers3

-1

You can use grid to get more control of your layout. Or you can add custom css like:

.h-20{
  position: relative;
  top:-7.5rem;
}
SUHAIL N
  • 1
  • 1
-1

I think that you will want to use grid as @Suhail suggested. It offers more in the way of control. But this all depends on if these divs/boxes are dynamic in nature or will all be a fixed size. Be sure to look at https://css-tricks.com/snippets/css/complete-guide-grid/ for more info. This can be configured using tailwindcss and their grid classes.

Also another great resource on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

john
  • 539
  • 5
  • 13
-1

To arrange elements in both rows and columns, you must use grid, because according to the definition of flex, it can only be used to arrange elements in one dimension, but by using grid, this problem can be easily solved.

example

Alan Shabrandi
  • 37
  • 3