使用弹性框文本对齐重新创建网格答案

【问题标题】：Recreation of grid with flex box text alignment使用弹性框文本对齐重新创建网格
【发布时间】：2022-02-14 07:04:17
【问题描述】：

我对 flexbox 很陌生，我正在努力精通它。我正在尝试使用 flexbox 重新创建此网格 - 它非常接近，但我在文本对齐方面遇到了问题，如何按照网格文本的对齐方式对齐 flexbox 文本？'

编辑：我不知道这有什么不清楚的地方。我正在尝试使弹性框左对齐，与底部网格的对齐方式相同。弹性框居中但不左对齐。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet"/>

This is Flex:

        <div class="flex flex-wrap w-full justify-center items-center content-center text-center min-h-screen">


                <div class="flex flex-col w-full md:w-1/3 max-w-md bg-red-100">
                    <div class="py-12">
                    <h4 class="font-semibold tracking-widest text-xs">Box 1.1</h4>
                    <p>Box 1.1 Flexbox</p>
                    </div>
                </div>

                <div class="flex flex-col w-full md:w-1/3 max-w-md bg-blue-100">
                    <div class="py-12">
                    <h4 class="font-semibold tracking-widest text-xs">Box 1.2</h4>
                    <p>Box 1.2 Flexbox</p>
                    </div>
                </div>

                <div class="flex flex-col w-full md:w-1/3 max-w-md bg-green-100">
                    <div class="py-12">
                    <h4 class="font-semibold tracking-widest text-xs">Box 1.3</h4>
                    <p>Box 1.3 Flexbox</p>
                    </div>
                </div>
        
        
        </div>
    
    This is Grid:
    
    <div class="flex flex-wrap w-full justify-center items-center content-center min-h-screen">



            <div class="grid grid-cols-1 md:grid-cols-3 mx-auto gap-24 lg:gap-48 xl:gap-56">
                <div class="bg-red-100">
                    <h4 class="font-semibold tracking-widest text-xs">Box 2.1</h4>
                    <p>Box 2.1 Flexbox</p>
                </div>
                <div class="bg-blue-100">
                    <h4 class="font-semibold tracking-widest text-xs">Box 2.2</h4>
                    <p>Box 2.2 Flexbox</p>
                </div>
                <div class="bg-green-100">
                    <h4 class="font-semibold tracking-widest text-xs">Box 2.3</h4>
                    <p>Box 2.3 Flexbox</p>
                </div>
            </div>

            
        </div>

【问题讨论】：

不清楚你在问什么。请更具体。
你想使用tailwind框架吗？在纯 CSS 中使用 text-align : center 为每个 div 你可以做到。
@MichaelBenjamin 我的示例问题怎么不清楚？我想让顶部看起来像底部？底部居中但左对齐，顶部居中。
如果顶部的字符数与底部的字符数相同，它们都会对齐。这就是你的问题不清楚的原因。
@MichaelBenjamin 我认为你向下滚动的不够多......我已经编辑了我的代码示例。请注意框 1.1 与框 2.1 的理由不同

标签： css flexbox tailwind-css

【解决方案1】：

我就是这样解决的：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet"/>




        <section class="flex flex-wrap w-full justify-center items-center content-center mt-20 lg:mt-0 min-h-85 fade fadeout">

            <div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-red-100">
                <div class="py-12 w-52 bg-red-200">
                    <h4 class="font-semibold tracking-widest text-xs">Box 1</h4>
                    <p>Box 1 Flexbox</p>
                </div>
            </div>

            <div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-blue-100">
                <div class="py-12 w-52 bg-blue-200">
                    <h4 class="font-semibold tracking-widest text-xs">Box 2</h4>
                    <p>Box 2 Flexbox</p>
                </div>
            </div>

            <div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-green-100">
                <div class="py-12 w-52 bg-green-200">
                    <h4 class="font-semibold tracking-widest text-xs">Box 3</h4>
                        <p>Box 4 Flexbox</p>
                </div>
            </div>


        </section>

如果有人有更好的方法，请告诉我。

【讨论】：

您的解决方案是什么？你用过flex-direction: column？

【解决方案2】：

如何按照网格文本的对齐方式对齐 flexbox 文本？'

无法完成（使用纯 CSS）。

网格建立列轨道。您可以在这些轨道内对齐内容（因此，左对齐）。

Flex 没有这样的列轨道，只有 flex 行。这意味着内容没有任何东西可以左对齐（超出容器边界）。它只能根据可用空间沿柔性线对齐。

【讨论】：