Tailwind Flexbox 网格布局

Posted 2023-02-22

【中文标题】Tailwind Flexbox 网格布局

【英文标题】：Talwind Flexbox Grid Layout

【发布时间】：2020-06-29 00:30:26

【问题描述】：

我正在尝试学习如何使用 Tailwind Flexbox Grids 构建网站布局，因为我认为这很有价值。我有一些问题：

如何构建这样的布局？ The layout 使用 Flexbox 网格？特别是侧边栏部分？想不通。做一些比只有一堆相互重叠的行更复杂的事情似乎很棘手？

除此之外，我如何进一步开发它？一堆行？

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

<div>
  <div class="flex">
    <div class="w-1/4 bg-gray-400 text-center h-32">
      <button>SAVE</button>
    </div>
    <div class="w-1/4 bg-gray-500">1</div>
    <div class="w-1/4 bg-gray-600">1</div>
    <div class="w-1/4 bg-gray-700">1</div>
  </div>
  <div class="flex">
    <div class="w-1/4 bg-gray-400 text-center h-32">
      <button>SAVE</button>
    </div>
    <div class="w-1/4 bg-gray-500">1</div>
    <div class="w-1/4 bg-gray-600">1</div>
    <div class="w-1/4 bg-gray-700">1</div>
  </div>
  <div class="flex">
    <div class="w-1/4 bg-gray-400 text-center h-32">
      <button>SAVE</button>
    </div>
    <div class="w-1/4 bg-gray-500">1</div>
    <div class="w-1/4 bg-gray-600">1</div>
    <div class="w-1/4 bg-gray-700">1</div>
  </div>
  <div class="flex">
    <div class="w-1/4 bg-gray-400 text-center h-32">
      <button>SAVE</button>
    </div>
    <div class="w-1/4 bg-gray-500">1</div>
    <div class="w-1/4 bg-gray-600">1</div>
    <div class="w-1/4 bg-gray-700">1</div>
  </div>
</div>

【问题讨论】：

哦，忘了！现在我已将其发布在问题中！ :-)

【参考方案1】：

顺风

你可以用 tailwind/flex 来完成这个，但我不推荐它。

/* Demo Only CSS */

div 
  border: 1px solid black;
  text-align: center;
  padding: 10px;
  background-color: rgba(0, 0, 0, .1);

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

<div class="min-h-screen flex flex-col">
  <div class="flex h-32">
    <div class="w-full">1</div>
  </div>
  <div class="flex flex-1">
    <div class="w-1/4">2</div>
    <div class="flex-1">
      <div class="flex flex-col h-full">
        <div class="h-32">3</div>
        <div class="flex h-32">
          <div class="w-1/2">4</div>
          <div class="w-1/2">5</div>
        </div>
        <div class="flex-1">6</div>
      </div>
    </div>
  </div>
</div>

从演示中可以看出，这需要大量嵌套的 html 标签。

幸运的是，有更好的方法！

CSS 网格

grid-template 使这变得更容易。它也更加灵活！

.grid-container 
  display: grid;
  grid-template:
    'header header header'
    'sidebar heading heading'
    'sidebar col-left col-right'
    'sidebar body body';


.header
  grid-area: header;

.sidebar
  grid-area: sidebar;

.heading
  grid-area: heading;

.col-left
  grid-area: col-left;

.col-right
  grid-area: col-right;

.body
  grid-area: body;




/* Demo Only CSS */
div 
 border: 1px solid black;
 padding: 10px;
 text-align: center;

<div class="grid-container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="heading">heading</div>
  <div class="col-left">col-left</div>
  <div class="col-right">col-right</div>
  <div class="body">body</div>
</div>

【讨论】：

超级乐于助人的人！我只是想知道一件事！数字 6 div .. 是否可以简单地将其填满尚未填充的页面其余部分？

是的，我更新了 sn-p 以满足您的需求。我刚刚添加了 flex-1

的 css 类

糟糕，我犯了一个错误，这不仅仅是添加一个类。现在应该可以进行演示了。