CODEWITHSUNDEEP
csstailwind-css
Ray Purchase
Ray Purchase

Reputation: 762

How to use justify-between vertically with Tailwind?

I have a flex-col container I do not know the height of. I should be able to use justify-between in the container to separate two divs, on to the top and one to the bottom of the div, as its main axis is defined as vertical, and justify-between is used to 'justify items along the container’s main axis' according to the docs.

This code works horizontally:

<div class="w-screen h-screen bg-blue-200">
    <div class="flex justify-between">
        <div>1</div>
        <div>3</div>
    </div>
</div>

However, if we change the second div to a 'flex-col' justify-between doesn't work along the vertical axis. Why is this?

<div class="w-screen h-screen bg-blue-200">
    <div class="flex flex-col justify-between">
        <div>1</div>
        <div>3</div>
    </div>
</div>

Playground here: https://play.tailwindcss.com/41DdUFN3Fw

How can I achieve this, please?

Upvotes: 10

Views: 13351

Answers (1)

Webfeya
Webfeya

Reputation: 313

It will only work when the element's height increases:

<div class="w-screen h-screen bg-blue-200">
    <div class="flex flex-col justify-between" style="height:100vh">
        <div>1</div>
        <div>3</div>
    </div>
</div>

enter image description here

Upvotes: 10

Related Questions