带有可调整大小的列的 Tailwind 两列布局

Posted 2023-03-07

【中文标题】带有可调整大小的列的 Tailwind 两列布局

【英文标题】：Tailwind two column layout with resizeable columns

【发布时间】：2022-01-13 13:54:45

【问题描述】：

我正在尝试实现使用顺风创建的两列布局，它允许左列水平调整大小。调整列大小时，右列应填充剩余空间。我使用grid-cols-2 创建两列布局，但使用grid-cols resize-x 只会影响左列。演示可以在这里找到：https://play.tailwindcss.com/W2sGHdRz4Y

<div class="flex flex-col min-h-screen max-h-screen">
  <!-- Header -->
  <div class="flex h-20 justify-center items-center bg-gray-100">Header</div>

  <div class="flex flex-1 bg-gray-200 overflow-y-auto">
    <div class="grid grid-cols-2 bg-gray-200">
      <!-- Left -->
      <div class="flex flex-1 overflow-y-auto resize-x">
        <div class="flex flex-1 flex-col overflow-y-auto">
          <!-- Tabs -->
          <div class="flex h-12 space-x-2 overflow-x-auto justify-between items-center px-4">
            <div class="w-1/2 text-center">One</div>
            <div class="w-1/2 text-center">Two</div>
          </div>

          <!-- Images -->
          <div class="flex flex-1 flex-wrap justify-center bg-gray-300 p-3 overflow-y-auto">
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
          </div>
        </div>
      </div>

      <!-- Right -->
      <div class="px-4 overflow-y-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae illum sed, praesentium voluptatem dolor excepturi optio explicabo dolorem facere culpa enim sapiente minima voluptates quis, repellat magni obcaecati ut ullam? Sunt doloribus fuga reprehenderit ipsam adipisci, natus sequi quisquam id nobis quae sit saepe reiciendis molestias amet! Error fugit sequi dolorem laudantium atque. Tenetur ea nam, incidunt magnam sunt praesentium. At deleniti, quos praesentium blanditiis facilis velit deserunt, veritatis fuga beatae perferendis accusamus. Sit, repellat veniam dolore libero officiis voluptatibus quae explicabo ab, dolores perspiciatis cum. Aut ipsa placeat in. Mollitia, dolores enim perspiciatis possimus aut unde cumque, dicta, quae placeat iste exercitationem excepturi nulla eaque illo aliquid quos optio! Recusandae nostrum a rerum similique ex! A quod nobis accusamus. Consectetur provident, quis inventore, quibusdam dolorum sed necessitatibus assumenda iure et delectus facere eligendi? Iusto, cum magnam inventore atque odit expedita iste hic molestiae fugiat accusantium maiores. Perspiciatis, perferendis consequatur! Molestias neque, assumenda facilis sunt debitis voluptate magni nulla est hic iure accusamus corporis aliquam autem delectus, amet quam enim dolore. Molestiae, quibusdam totam minus ullam labore fugiat. Atque, sint. Quis ex laboriosam reiciendis eos sequi maxime amet quod enim repellat consequatur officiis, accusantium ad vitae atque ut praesentium non iure harum error! Temporibus suscipit adipisci optio rerum voluptatum repudiandae. Odio, laboriosam libero aliquam velit sequi id nihil. Excepturi molestiae officiis magni optio veritatis modi error atque itaque. Aliquam dolor impedit mollitia maiores in at distinctio molestias natus debitis fugiat. Quia obcaecati harum officia deleniti ipsam at architecto cum mollitia sint. Dicta totam commodi consectetur voluptates pariatur ad, quisquam quidem. Quisquam nihil suscipit eos magni iusto odio nam unde dolore? Provident repudiandae quo vitae ratione ipsum enim animi tenetur rerum cum, molestiae eius quibusdam omnis nesciunt nobis ex qui est delectus blanditiis facere, eum modi possimus nostrum, ea laboriosam? Tempora. Quas a voluptates doloribus quisquam fugiat harum officiis eligendi, dolorum perspiciatis itaque voluptatum corrupti atque qui animi aliquam. Sint asperiores eius delectus odio, laudantium voluptates officiis. Quod, unde. Ipsa, eius. Sequi atque assumenda vero inventore quo. Tempore necessitatibus magnam dolores. Deleniti, iure quae. Temporibus nisi magnam qui tenetur, incidunt, in aspernatur eum quo quod, aliquam doloribus assumenda. Deserunt, in quos. Qui ullam quia aliquam ad, obcaecati cumque illo, et eligendi exercitationem veniam nobis dignissimos, accusantium ipsam? At iste commodi voluptate dolore soluta, voluptatibus labore, eum reiciendis atque, ea esse nesciunt. Voluptates, labore! Vitae voluptate veritatis illo, iste excepturi sit ut asperiores sed fuga cumque ducimus, deleniti voluptatum magnam debitis architecto. Suscipit omnis soluta officia, saepe perferendis itaque repellat accusamus. Eos? Cum doloremque sapiente tenetur maxime quam deserunt autem minima sed nemo corrupti ad, dolorem laboriosam? Molestias quia aliquid quis labore culpa, sapiente vero harum repellat placeat eos cumque nesciunt architecto? Laboriosam tempora culpa sed, alias dolorem neque architecto, iste repudiandae fuga illo provident, soluta cum sapiente nam ipsa ex quisquam! Deleniti quae delectus eveniet odio voluptas unde. Repudiandae, dolore praesentium? Ab in nisi voluptas praesentium eum doloremque ea, molestiae qui dicta? Ullam, at. At in accusantium itaque ab harum, neque eligendi repellat quas, hic nulla maxime magni delectus nesciunt est? Ipsum dicta repudiandae cum accusantium blanditiis illo quidem velit maiores fugiat aliquam soluta odio mollitia, numquam repellendus neque ea labore. Beatae nostrum quibusdam impedit repudiandae ducimus doloremque voluptas necessitatibus quae? Accusamus nam officia tenetur eius consequuntur facilis! Similique, accusamus dolorum, eligendi eveniet ipsam culpa nobis cum adipisci iusto vero, molestias nulla maiores! Corporis, dolores ducimus illum impedit quam dolore harum. Itaque, doloribus beatae maiores accusantium ab quaerat sunt ipsa quis iste autem amet reiciendis earum voluptatem quas, adipisci expedita! Voluptatem temporibus laborum eveniet incidunt excepturi cum quia est esse ad. Placeat provident aut minima rem veniam aliquid corporis rerum eius et? Odit eos praesentium explicabo repellat, facilis corporis id unde possimus officiis, fugit expedita at modi consequatur. Quis, molestiae consectetur. Temporibus perferendis officia consequuntur illo omnis tempore modi nobis quam rerum sed, doloremque provident tenetur veniam laudantium ex quae distinctio quisquam voluptatum? Mollitia tenetur eligendi praesentium porro reiciendis quas esse. Mollitia aspernatur dolor consequatur laudantium odit a explicabo provident corporis reiciendis. Sunt ut iure officiis, ipsa minus deleniti cumque temporibus doloremque assumenda voluptatibus, est nobis incidunt. Veniam corporis vel impedit. Voluptatibus rem velit sit eius perspiciatis omnis cupiditate laudantium ab quo, earum eligendi deleniti explicabo a eum soluta accusamus repellendus ad ipsum praesentium pariatur aliquid facere debitis doloremque quasi! Autem? Laborum recusandae, optio molestiae distinctio a id vitae esse? Officia distinctio dignissimos nihil blanditiis quibusdam facere nulla eum voluptas excepturi nam quia, atque adipisci? Distinctio quisquam suscipit vitae voluptas enim. Eius beatae non possimus dolores quo nostrum illo aliquam minus commodi fugit architecto alias rerum accusantium ratione, magni atque nisi repellendus deleniti! Ratione necessitatibus sequi magnam, doloribus pariatur dolorem harum! Inventore beatae, incidunt voluptatibus doloremque corrupti facilis cum! Hic ipsum dolorum accusamus quia veritatis, quibusdam commodi tenetur, reiciendis mollitia sapiente facilis nam, accusantium quidem. Voluptate architecto at voluptatem eaque id? Obcaecati adipisci quisquam tempore blanditiis, qui error eius ab ea ipsa suscipit dignissimos nisi quos ut quas voluptatem amet. Ut sit aliquid molestias, hic iste dolorum nobis laudantium quasi quo? Laudantium cumque voluptatem reprehenderit consequatur quisquam alias odit animi cupiditate! Quod nostrum inventore necessitatibus, distinctio quibusdam dignissimos qui ipsa accusantium incidunt neque explicabo temporibus cumque sapiente corporis. Amet, modi exercitationem. Modi aperiam laboriosam corrupti consequuntur provident veritatis sunt animi repellendus ratione! Deleniti reprehenderit perferendis ad natus magnam sunt delectus eaque repellat error, enim alias rerum harum eius fugit. Dolores, eos. Doloribus quibusdam et doloremque natus corrupti earum iure! Impedit id aut unde officia tenetur cum asperiores, eos pariatur! Provident ullam qui beatae ab rerum quibusdam, odit ipsam totam cum quasi! Magni error, quos quia, voluptas natus vel totam impedit voluptatum, fugit ex autem aliquid tempore magnam! Minus et voluptatum similique quis asperiores repellat perspiciatis quasi dolore molestiae vero, itaque laudantium. Corporis quibusdam, sit, quos molestias laudantium et reprehenderit possimus vel atque culpa repellendus at deserunt earum quo. Cum ratione saepe ad, aut corrupti nesciunt, et consequuntur alias explicabo, dignissimos veritatis. Dolores, neque? Eveniet odit ut eos ipsam, ullam autem voluptatum, odio accusantium tempore nesciunt obcaecati. Est, necessitatibus placeat nulla aut soluta quaerat in, sint dolorem excepturi voluptas asperiores laborum maxime. Culpa deleniti aliquam pariatur provident earum. Dolorum, quasi natus, ex dolorem obcaecati enim dignissimos nulla laboriosam placeat itaque repudiandae! Nisi pariatur reiciendis consequuntur ipsa dolore nostrum repellendus in! Possimus, reprehenderit. Quos nam ipsam voluptatum qui quo, placeat error fuga nobis laudantium provident aut minima deserunt similique accusamus impedit commodi facere repellendus? Iste, sapiente id! Fugiat temporibus magni minus provident saepe! Ipsa sunt iure nostrum quibusdam illum unde dolore labore voluptate facilis similique veritatis maiores officia quo quisquam, sapiente numquam temporibus neque in. Iusto placeat saepe suscipit cumque necessitatibus officia perferendis. Nemo quos laboriosam tempore doloribus repudiandae quidem molestiae. Nemo minus ipsa reprehenderit sapiente aspernatur repellat similique, officiis eos illo, animi minima delectus doloremque tempore distinctio ullam sunt, facilis fuga temporibus? Voluptate voluptatibus, ullam deleniti ad in, ratione dolor modi unde impedit libero facere quas perspiciatis accusantium ducimus officiis pariatur, doloribus dolorem beatae. Tenetur tempore beatae quia explicabo eos accusamus quisquam? Est recusandae praesentium impedit, asperiores culpa nesciunt iste reprehenderit earum eligendi cum, accusamus animi, placeat similique? Dolorem provident iusto velit voluptatem necessitatibus aliquid sequi vero, natus, commodi, sit minus veniam!</div>
    </div>
  </div>
</div>

【参考方案1】：

您可以删除grid-cols-2 并替换为grid-flow-col，如下所示https://play.tailwindcss.com/LfAxx5K6YP

<div class="flex flex-col min-h-screen max-h-screen">
  <!-- Header -->
  <div class="flex h-20 justify-center items-center bg-gray-100">Header</div>

  <div class="flex flex-1 bg-gray-200 overflow-y-auto">
    <div class="grid grid-flow-col bg-gray-200">
      <!-- Left -->
      <div class="flex flex-1 overflow-y-auto resize-x">
        <div class="flex flex-1 flex-col overflow-y-auto">
          <!-- Tabs -->
          <div class="flex h-12 space-x-2 overflow-x-auto justify-between items-center px-4">
            <div class="w-1/2 text-center">One</div>
            <div class="w-1/2 text-center">Two</div>
          </div>

          <!-- Images -->
          <div class="flex flex-1 flex-wrap justify-center bg-gray-300 p-3 overflow-y-auto">
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
          </div>
        </div>
      </div>

      <!-- Right -->
      <div class="px-4 overflow-y-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae illum sed, praesentium voluptatem dolor excepturi optio explicabo dolorem facere culpa enim sapiente minima voluptates quis, repellat magni obcaecati ut ullam? Sunt doloribus fuga reprehenderit ipsam adipisci, natus sequi quisquam id nobis quae sit saepe reiciendis molestias amet! Error fugit sequi dolorem laudantium atque. Tenetur ea nam, incidunt magnam sunt praesentium. At deleniti, quos praesentium blanditiis facilis velit deserunt, veritatis fuga beatae perferendis accusamus. Sit, repellat veniam dolore libero officiis voluptatibus quae explicabo ab, dolores perspiciatis cum. Aut ipsa placeat in. Mollitia, dolores enim perspiciatis possimus aut unde cumque, dicta, quae placeat iste exercitationem excepturi nulla eaque illo aliquid quos optio! Recusandae nostrum a rerum similique ex! A quod nobis accusamus. Consectetur provident, quis inventore, quibusdam dolorum sed necessitatibus assumenda iure et delectus facere eligendi? Iusto, cum magnam inventore atque odit expedita iste hic molestiae fugiat accusantium maiores. Perspiciatis, perferendis consequatur! Molestias neque, assumenda facilis sunt debitis voluptate magni nulla est hic iure accusamus corporis aliquam autem delectus, amet quam enim dolore. Molestiae, quibusdam totam minus ullam labore fugiat. Atque, sint. Quis ex laboriosam reiciendis eos sequi maxime amet quod enim repellat consequatur officiis, accusantium ad vitae atque ut praesentium non iure harum error! Temporibus suscipit adipisci optio rerum voluptatum repudiandae. Odio, laboriosam libero aliquam velit sequi id nihil. Excepturi molestiae officiis magni optio veritatis modi error atque itaque. Aliquam dolor impedit mollitia maiores in at distinctio molestias natus debitis fugiat. Quia obcaecati harum officia deleniti ipsam at architecto cum mollitia sint. Dicta totam commodi consectetur voluptates pariatur ad, quisquam quidem. Quisquam nihil suscipit eos magni iusto odio nam unde dolore? Provident repudiandae quo vitae ratione ipsum enim animi tenetur rerum cum, molestiae eius quibusdam omnis nesciunt nobis ex qui est delectus blanditiis facere, eum modi possimus nostrum, ea laboriosam? Tempora. Quas a voluptates doloribus quisquam fugiat harum officiis eligendi, dolorum perspiciatis itaque voluptatum corrupti atque qui animi aliquam. Sint asperiores eius delectus odio, laudantium voluptates officiis. Quod, unde. Ipsa, eius. Sequi atque assumenda vero inventore quo. Tempore necessitatibus magnam dolores. Deleniti, iure quae. Temporibus nisi magnam qui tenetur, incidunt, in aspernatur eum quo quod, aliquam doloribus assumenda. Deserunt, in quos. Qui ullam quia aliquam ad, obcaecati cumque illo, et eligendi exercitationem veniam nobis dignissimos, accusantium ipsam? At iste commodi voluptate dolore soluta, voluptatibus labore, eum reiciendis atque, ea esse nesciunt. Voluptates, labore! Vitae voluptate veritatis illo, iste excepturi sit ut asperiores sed fuga cumque ducimus, deleniti voluptatum magnam debitis architecto. Suscipit omnis soluta officia, saepe perferendis itaque repellat accusamus. Eos? Cum doloremque sapiente tenetur maxime quam deserunt autem minima sed nemo corrupti ad, dolorem laboriosam? Molestias quia aliquid quis labore culpa, sapiente vero harum repellat placeat eos cumque nesciunt architecto? Laboriosam tempora culpa sed, alias dolorem neque architecto, iste repudiandae fuga illo provident, soluta cum sapiente nam ipsa ex quisquam! Deleniti quae delectus eveniet odio voluptas unde. Repudiandae, dolore praesentium? Ab in nisi voluptas praesentium eum doloremque ea, molestiae qui dicta? Ullam, at. At in accusantium itaque ab harum, neque eligendi repellat quas, hic nulla maxime magni delectus nesciunt est? Ipsum dicta repudiandae cum accusantium blanditiis illo quidem velit maiores fugiat aliquam soluta odio mollitia, numquam repellendus neque ea labore. Beatae nostrum quibusdam impedit repudiandae ducimus doloremque voluptas necessitatibus quae? Accusamus nam officia tenetur eius consequuntur facilis! Similique, accusamus dolorum, eligendi eveniet ipsam culpa nobis cum adipisci iusto vero, molestias nulla maiores! Corporis, dolores ducimus illum impedit quam dolore harum. Itaque, doloribus beatae maiores accusantium ab quaerat sunt ipsa quis iste autem amet reiciendis earum voluptatem quas, adipisci expedita! Voluptatem temporibus laborum eveniet incidunt excepturi cum quia est esse ad. Placeat provident aut minima rem veniam aliquid corporis rerum eius et? Odit eos praesentium explicabo repellat, facilis corporis id unde possimus officiis, fugit expedita at modi consequatur. Quis, molestiae consectetur. Temporibus perferendis officia consequuntur illo omnis tempore modi nobis quam rerum sed, doloremque provident tenetur veniam laudantium ex quae distinctio quisquam voluptatum? Mollitia tenetur eligendi praesentium porro reiciendis quas esse. Mollitia aspernatur dolor consequatur laudantium odit a explicabo provident corporis reiciendis. Sunt ut iure officiis, ipsa minus deleniti cumque temporibus doloremque assumenda voluptatibus, est nobis incidunt. Veniam corporis vel impedit. Voluptatibus rem velit sit eius perspiciatis omnis cupiditate laudantium ab quo, earum eligendi deleniti explicabo a eum soluta accusamus repellendus ad ipsum praesentium pariatur aliquid facere debitis doloremque quasi! Autem? Laborum recusandae, optio molestiae distinctio a id vitae esse? Officia distinctio dignissimos nihil blanditiis quibusdam facere nulla eum voluptas excepturi nam quia, atque adipisci? Distinctio quisquam suscipit vitae voluptas enim. Eius beatae non possimus dolores quo nostrum illo aliquam minus commodi fugit architecto alias rerum accusantium ratione, magni atque nisi repellendus deleniti! Ratione necessitatibus sequi magnam, doloribus pariatur dolorem harum! Inventore beatae, incidunt voluptatibus doloremque corrupti facilis cum! Hic ipsum dolorum accusamus quia veritatis, quibusdam commodi tenetur, reiciendis mollitia sapiente facilis nam, accusantium quidem. Voluptate architecto at voluptatem eaque id? Obcaecati adipisci quisquam tempore blanditiis, qui error eius ab ea ipsa suscipit dignissimos nisi quos ut quas voluptatem amet. Ut sit aliquid molestias, hic iste dolorum nobis laudantium quasi quo? Laudantium cumque voluptatem reprehenderit consequatur quisquam alias odit animi cupiditate! Quod nostrum inventore necessitatibus, distinctio quibusdam dignissimos qui ipsa accusantium incidunt neque explicabo temporibus cumque sapiente corporis. Amet, modi exercitationem. Modi aperiam laboriosam corrupti consequuntur provident veritatis sunt animi repellendus ratione! Deleniti reprehenderit perferendis ad natus magnam sunt delectus eaque repellat error, enim alias rerum harum eius fugit. Dolores, eos. Doloribus quibusdam et doloremque natus corrupti earum iure! Impedit id aut unde officia tenetur cum asperiores, eos pariatur! Provident ullam qui beatae ab rerum quibusdam, odit ipsam totam cum quasi! Magni error, quos quia, voluptas natus vel totam impedit voluptatum, fugit ex autem aliquid tempore magnam! Minus et voluptatum similique quis asperiores repellat perspiciatis quasi dolore molestiae vero, itaque laudantium. Corporis quibusdam, sit, quos molestias laudantium et reprehenderit possimus vel atque culpa repellendus at deserunt earum quo. Cum ratione saepe ad, aut corrupti nesciunt, et consequuntur alias explicabo, dignissimos veritatis. Dolores, neque? Eveniet odit ut eos ipsam, ullam autem voluptatum, odio accusantium tempore nesciunt obcaecati. Est, necessitatibus placeat nulla aut soluta quaerat in, sint dolorem excepturi voluptas asperiores laborum maxime. Culpa deleniti aliquam pariatur provident earum. Dolorum, quasi natus, ex dolorem obcaecati enim dignissimos nulla laboriosam placeat itaque repudiandae! Nisi pariatur reiciendis consequuntur ipsa dolore nostrum repellendus in! Possimus, reprehenderit. Quos nam ipsam voluptatum qui quo, placeat error fuga nobis laudantium provident aut minima deserunt similique accusamus impedit commodi facere repellendus? Iste, sapiente id! Fugiat temporibus magni minus provident saepe! Ipsa sunt iure nostrum quibusdam illum unde dolore labore voluptate facilis similique veritatis maiores officia quo quisquam, sapiente numquam temporibus neque in. Iusto placeat saepe suscipit cumque necessitatibus officia perferendis. Nemo quos laboriosam tempore doloribus repudiandae quidem molestiae. Nemo minus ipsa reprehenderit sapiente aspernatur repellat similique, officiis eos illo, animi minima delectus doloremque tempore distinctio ullam sunt, facilis fuga temporibus? Voluptate voluptatibus, ullam deleniti ad in, ratione dolor modi unde impedit libero facere quas perspiciatis accusantium ducimus officiis pariatur, doloribus dolorem beatae. Tenetur tempore beatae quia explicabo eos accusamus quisquam? Est recusandae praesentium impedit, asperiores culpa nesciunt iste reprehenderit earum eligendi cum, accusamus animi, placeat similique? Dolorem provident iusto velit voluptatem necessitatibus aliquid sequi vero, natus, commodi, sit minus veniam!</div>
    </div>
  </div>
</div>

编辑：

您可能还想将flex-none 添加到您的标题并降低高度（当前被 flex 布局忽略）。这应该可以解决在调整列大小时奇怪的标题调整大小。看这里https://play.tailwindcss.com/dLWRqWLJqe

【讨论】：

感谢flex-none 提及标题。直到我读到你的回答才意识到这个问题。

简短的后续问题：当我想让最后一列填满所有可用空间时（例如，当内容只有Lorem ipsum时），我该如何归档它？我试图设置 w-full 但这只会占用内容的 100% 宽度。 play.tailwindcss.com/y4HIrTNt1S

w-full 在网格和弹性布局中经常受到不尊重。不过，通常会遵守最小和最大宽度值以及固定宽度（非百分比）。因此，您可以创建一个比您想象的屏幕更大的新宽度值（在我的示例中为 1000rem），然后给它一个max-w-full，它应该很好。在此处检查配置选项卡play.tailwindcss.com/sBrMAQivuT 我还添加了您声明的max-w-72 类，因为它不是默认的 TW 类。