Search code examples
htmlcsstailwind-cssastrojs

Tailwind flex-column working as row instead of column

I'm working on a simple portfolio webpage with Astro.js, Tailwind and Svelte, although the problem I have is with css only.

This is the layout I want

The desired layout

I thought that this might be one flex-row container with the second container being a flex-column with 3 containers.

This is my code

<section class="overflow-hidden"> <!-- I dont know what this line does tbh -->
    <div class="container mx-auto mb-10 w-1/2">
        <div class="flex flex-row">
            <div class="w-2/3">
                <div class="flex flex-column"> <!-- I put this as flex-column in case i want to add some more images in the same column in the future -->
                    <div class="h-3/4 p-1 md:p-2">
                        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                            src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp">
                    </div>
                </div>
            </div>
            <div class="w-1/3">
                <div class="flex flex-column justify-center"> <!-- This doesn't work -->
                    <div class="p-1">
                        <p>P1</p>
                    </div>
                    <div class="p-1">
                        <p>P2</p>
                    </div>
                    <div class="p-1">
                        <p>P3</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

This is the result I have (i have added some blue borders in order for me to see the actual boxes)

Wrong layout with row instead of column

I'm a bit noob in web dev so I have no idea why isnt this working. Does somebody know what's happening?

Solution

  • As someone pointed out in the comments, it's flex-col not flex-column