Flexbox 和网格系统有什么区别？

Question

Flexbox 和网格系统有什么区别？各个系统在什么情况下应该使用？

Answer 1

Grid和Flexbox

之间的区别

---

• Flexbox 最适合一维布局（如行或列）

• CSS 网格最适合 2D 布局（行和列）

• Grid 可以做 Flexbox 做不到的事情，Flexbox 可以做 Grid 做不到的事情。

• 它们可以一起工作：网格项可以是一个 flexbox 容器。弹性项目可以是grid容器。

• 使用 CSS Grid，我们可以同时设置水平和垂直关系。另一方面，__Flexbox__ 陷入了垂直或水平布局的困境。

进一步阅读

Answer 2

Flexbox 是一维的，使其所有直接子项（“flex items”）能够沿着其定义的主轴放置，如果尚未定义宽度，则上下文可能会发生变化。

CSS 网格被设计为二维布局系统：CSS 网格可以处理列和行。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout

Answer 3

这是一个微妙的主题领域，没有直接的答案，因此为了帮助证明差异，我将提供示例。由于涉及的内容太多，我可以向您推荐我最近编写的指南，名为 CSS Grid vs flexbox

只能通过Flexbox实现

以下布局（适用于标签和其他类似内联的内容）只能通过 Flexbox 实现，因此 Flexbox 或 CSS Grid 之间有一个明显的选择：

.flex-container {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  padding: 16px;
}

.flex-item {
  border: 1px solid;
  padding: 8px;
  border-radius: 8px;
}

<div class="flex-container">
  <div class="flex-item">1. The quick brown fox</div>
  <div class="flex-item">2. Jumps over the lazy dog.</div>
  <div class="flex-item">3. Flexbox makes CSS layout a breeze!</div>
  <div class="flex-item">4. Pack my box with five dozen liquor jugs.</div>
  <div class="flex-item">
    5. A man provided with paper, pencil, and rubber, and subject to strict
    discipline, is in effect a universal machine.
  </div>
  <div class="flex-item">6. I am a demo for Flexbox layout.</div>
</div>

只能通过 CSS Grid 来实现

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 16px;
}

.grid-item {
  border: 1px solid;
  padding: 8px;
  border-radius: 8px;
}

<div class="grid-container">
  <div class="grid-item">1. The quick brown fox</div>
  <div class="grid-item">2. Jumps over the lazy dog.</div>
  <div class="grid-item">3. CSS Grid makes CSS layout a breeze!</div>
  <div class="grid-item">4. Pack my box with five dozen liquor jugs.</div>
  <div class="grid-item">5. A man provided with paper, pencil, and rubber, and subject to strict discipline, is in effect a universal machine.</div>
  <div class="grid-item">6. I am a demo for CSS Grid layout.</div>
</div>

因为我指定了三列，所以布局中有六个

<div>

元素，总共隐式创建了两行。 Flex 由于其一维性质而无法创建行。

与 Flexbox 等效的方法很困难，最终会失败（如下面的 gif 所示）

.flex-container {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  padding: 16px;
}

.flex-item {
  border: 1px solid;
  padding: 8px;
  border-radius: 8px;
  flex: 0 0 calc((100% / 3) - calc(8px * 2) / 3);
}

弹性

网格

网格系统

CSS 网格的二维性质消除了使用标记描述布局的需要，不需要像 Bootstrap 那样做这种事情（类似于表格）：

<div class="grid">
 <div class="row">
  <div class="col">content</div>
 </div>
</div>

相反，你可以这样做（就像 Tailwind 那样）：

<div class="grid">
 <div class="col">content</div>
</div>

最后是一个复杂的布局

采用以下称为“圣杯”的布局：

要使用 CSS Grid 创建它，可以像这样完成：

.grid-container {
  min-height: 100vh;
  display: grid;
  gap: 8px;
  padding: 36px 18px;
  text-align: center;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}

header,
footer {
  grid-column: span 3;
}

<div class="grid-container">
  <header>Header</header>
  <aside>Aside</aside>
  <div class="grid-item">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

而对于 Flex，我需要添加更多 CSS，并且由于 Flex 的一维性质，需要更多标记：

.flex-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 36px 18px;
  gap: 8px;
  text-align: center;
}

main {
  flex: 2;
}

aside {
  flex: 1;
  display: flex;
  flex-direction: column;
}

article {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

<div class="flex-container">
  <header>Header</header>
  <article>
    <aside>Aside</aside>
    <main>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</main>
    <aside>Aside</aside>
  </article>
  <footer>Footer</footer>
</div>