如何在顺风中使用 flex答案

【问题标题】：How to use flex in tailwind如何在顺风中使用 flex
【发布时间】：2021-12-15 07:58:42
【问题描述】：

我有 3 列页面是用 tailwind css 制作的，当屏幕尺寸小于“2xl”时，我想将第一列移动到第二列顶部，而第三列隐藏在 xl 断点处

<div className="relative z-0 flex overflow-hidden flex-grow">
          {/* Start first column */}
        <aside className="relative 2xl:order-first 2xl:flex-col flex-shrink-0 w-96 border-r border-gray-200 overflow-y-auto">
          <div className="absolute inset-0 py-6 px-1">           
          </div>
        </aside>
          {/* End first column */}
          {/* Start main area*/}
        <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
          <div className="absolute inset-0 py-6 px-4 sm:px-6 lg:px-8">
          </div>
        </main>
          {/* End main area */}
        {/* Start third column */}
        <aside className="hidden xl:order-last xl:flex xl:flex-col flex-shrink-0 border-r border-gray-200 w-96">
          <div className="inset-0 py-6 px-1"></div>
        </aside>
        {/* end last column */}
      </div>

任何建议或解决方案将不胜感激

【问题讨论】：

标签： css flexbox tailwind-css

【解决方案1】：

如果我正确理解需求，我们必须：

使布局具有响应性，以便在细分 xl 之前使用 1 列布局，在布局 2xl 之前使用 3 列，之后使用 2 列
在细分后隐藏第 3 列 xl

您绝对可以使用开箱即用的顺风 css 实现这一目标

使用 pure: flex 处理列的宽度
使用网格布局：更好恕我直言，因为它更稳定，您可以轻松添加间隙而不会破坏布局

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-blue-100">

    <div class="text-xl p-4">Pure Flex solution</div>
    <div class="flex flex-row flex-wrap bg-red-400 p-4">
        <div class="w-full xl:w-1/3 2xl:w-1/2 p-4 bg-yellow-400">
            Column 1
        </div>
        <div class="w-full xl:w-1/3 2xl:w-1/2 p-4 bg-gray-400">
            Column 2
        </div>
        <div class="w-full xl:w-1/3 2xl:hidden p-4 bg-blue-400">
            Column 3
        </div>
    </div>
    
    <div class="mt-4 text-xl p-4">Grid solution</div>
    <div class="grid grid-cols-1 xl:grid-cols-3 2xl:grid-cols-2 gap-4 p-4 bg-pink-400">
        <div class="w-full p-4 bg-yellow-400">
            Column 1
        </div>
        <div class="w-full p-4 bg-gray-400">
            Column 2
        </div>
        <div class="w-full 2xl:hidden p-4 bg-blue-400">
            Column 3
        </div>
    </div>
    
    <div class="mt-4 text-xl italic p-4">Other understanding of the need</div>
    <div class="grid grid-cols-1 2xl:grid-cols-3 gap-4 p-4 bg-purple-400">
        <div class="w-full p-4 bg-yellow-400">
            Column 1
        </div>
        <div class="w-full p-4 bg-gray-400">
            Column 2
        </div>
        <div class="w-full xl:hidden 2xl:grid p-4 bg-blue-400">
            Column 3
        </div>
    </div>
</body>

【讨论】：