Tailwind flex-column表现为row而非column的布局问题求助

我用Astro.js、Tailwind和Svelte开发作品集网页，想实现左侧单张大图、右侧三个元素纵向排列的布局，采用flex-row容器嵌套flex-column容器的结构，但右侧的flex-column没生效，元素还是横向排列。

问题代码 #

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

布局效果 #

• 预期布局：
  

• 实际错误布局：
  

问题根源与解决方法 #

核心问题是Tailwind CSS中没有flex-column这个类名，正确的纵向排列类是flex-col。

把代码中所有的flex-column替换成flex-col即可解决问题，修改后的代码如下：

<section class="overflow-hidden"> <!-- 这个类用于隐藏容器内超出的内容，避免溢出破坏布局 -->
    <div class="container mx-auto mb-10 w-1/2">
        <div class="flex flex-row">
            <div class="w-2/3">
                <div class="flex flex-col"> <!-- 替换为flex-col -->
                    <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-col justify-center"> <!-- 替换为flex-col -->
                    <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>

另外补充你注释里的疑问：overflow-hidden类的作用是隐藏容器内部超出边界的内容，防止内容溢出导致滚动条或者布局错乱。

内容的提问来源于stack exchange，提问作者Rabid