CSS Grid 和 Flexbox：简要对比

CSS Grid 和 Flexbox 是两种 CSS 布局模块，它们在实现技术和用途上有所不同。Flexbox 的主要设计目的是优化界面元素之间的空间分配和稳定的对齐能力。而 CSS Grid 则更擅长将页面划分为关键区域，或定义 HTML 基本控件各部分之间的大小、位置和层级关系。由于两者之间存在的相似性，随着交互式网页设计的兴起，两者之间效率的提升问题在 Web 开发圈中变得尤为突出。

因此，本文将对 flexbox 与 CSS Grid 的区别以及应用程序如何根据需要进行更改进行全面比较。

将 CSS Grid 与 Flexbox 结合在一起

CSS Grid 和 Flexbox 的引入取代了创建页面布局、项目位置和组件对齐的古老技巧。这两个模块有很多相似之处，因为它们都是显示模块。它们最初的目标都是以不同的方式定义元素的视觉位置。它们都为计算显示尺寸铺平了道路。它们实现对齐和对齐的方式类似，不同之处在于 Flexbox 对所有项目使用通用属性，而 CSS Grid 为每个项目提供单独的属性。

尽管它们的作用相似，但在网站中使用每种布局模型的最佳场合却因其方法和特性而异。有些情况下可以使用其中任何一种，而有些情况下则一种比另一种更合适。虽然具体使用场景取决于开发人员，但这需要讨论两者之间的差异。有些事情网格布局更擅长，而有些事情弹性框布局则无可比拟。此外，它们可以一起使用，其中网格项可以用作弹性容器，弹性项也可以用作网格容器。

有些工作可以用网格更好地完成。具体如下：

考虑布局性能原因来制作整个页面布局
制作文字网格需要更少的媒体查询干预，并具有自动布局、minmax()、repeat() 和自动填充等强大功能。

但是，仅凭这些并不能使网格优于弹性盒子。让我们来介绍一下两者的不同方法，希望这能帮助你更好地理解显示模块及其应用，并使你的任务更轻松。

CSS Grid 和 Flexbox 中的尺寸

弹性框本质上是用于在单一维度上布局项目——一行或一列。网格则用于在二维空间上布局项目——行和列。Rachel
Andrew

弹性盒子和 CSS 网格的主要区别在于弹性盒子是一维的。弹性盒子可以沿着水平轴或垂直轴布局元素，您可以决定是基于行还是基于列的布局。

弹性盒允许元素换行，从而导致行和列的弹性伸缩。由于弹性盒只是将元素沿单个轴推移，因此无法直接确定或控制元素的确切位置。

另一方面，CSS Grid 可以被视为二维的，因为它允许自由声明行和列的大小，然后明确地将内容放入其中。

基于 CSS Grid 和 Flexbox

在弹性盒布局中，单元格或弹性项目的大小是在弹性项目本身内部定义的，而网格布局中单元格的大小是在网格容器内部定义的。

请参阅下面的示例，了解如何调整弹性项目和网格单元格的尺寸。为了便于理解，该示例展示了两种构建相同布局的不同方法：

弹性框的 CSS

<div class="row">
  <div><h2>a</h2></div>
 <div><h2>b</h2></div>
 <div><h2>c</h2></div>
 <div><h2>d</h2></div>
</div>

.row {
    margin: 25px auto;
    max-width: 350px; 
  text-color: white;

    display: flex;
}
.row > div {
    border: 3px solid #F57CB1;
    flex: 2 2 auto; /* Size of items defined inside items */

  text-align: center; 
    padding: 10px;
}

.row > div:nth-child(odd){
     background-color: #FE2175;
}

.row > div:nth-child(even){
     background-color: #C61EB9;
}
h2{
  color: white;
}

网格的 CSS

    <div class="row">
      <div><h2>a</h2></div>
      <div><h2>b</h2></div>
      <div><h2>c</h2></div>
      <div><h2>d</h2></div>
    </div>

            .row {
        margin: 25px auto;
        max-width: 350px;
        display: grid;
        grid-auto-flow: column;
      }
      .row > div {
        border: 3px solid #f57cb1;
        text-align: center;
        padding: 10px;
      }

      .row > div:nth-child(odd) {
        background-color: #fe2175;
      }

      .row > div:nth-child(even) {
        background-color: #c61eb9;
      }
      h2 {
        color: white;
      }

差距

间隙是内容轨道之间的空间，可以直接使用 CSS 网格创建。它允许您使用 grid-column-gap 在网格项之间创建间距，而无需费力。关于网格大小，间隙的作用与常规网格轨道相同，尽管间隙中无法放置任何内容。此外，行间隙和列间隙并非唯一导致轨道间隙的原因。外边距、内边距或框对齐中使用的空间分布属性都会导致可见间隙。

请参阅下面的示例，了解网格如何利用单元格之间的间隙：

flex 的 CSS

<body>
  <div id="flexbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>

    #flexbox {
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    gap: 20px 5px;
    }

    #flexbox > div {
    border: 2px solid purple;
    background-color: skyblue;
    flex: 1 1 32%;
    }
</body>

网格的 CSS

<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
       #grid {
        display: grid;
        grid-template: repeat(3, 1fr) / repeat(3, 1fr);
        gap: 20px 5px;
      }

      #grid > div {
        border: 2px solid purple;
        background-color: skyblue;
        height: 50px;
      }

众所周知，flex 没有 gap 属性。所以你需要采取一种更巧妙的方法来在 flex 项目之间添加间隙（如上所示）。你需要使用 padding 和嵌套容器，或者你必须增加 flex 容器的宽度，同时使用 justify-content 属性来扩展 flex 项目。

裹

如果容器内项目的总宽度大于容器本身的宽度，则两个布局模块都可以选择将项目换行。弹性盒子和网格的妙处在于它们能够拉伸和收缩。但每个模块的处理方式不同。例如，flex-wrap 用于将项目换行成多行，并将每行视为一个容器。当弹性项目被换行并推入新行时，布局算法会将它们视为另一个弹性容器的一部分，被推入的新行项目将失去其上下文。因此，这些单元格无法与其他单元格拥有完全相同的尺寸。请看下面的示例：

<div class="outer-container">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
      .outer-container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
      }
      .red {
        background: #F57CB1;
      }
      .green {
        background: #EC7070;
      }
      .blue {
        background: #9070EC;
      }
      .outer-container > div {
        box-sizing: border-box;
        font-size: 5vw;
        padding: 0.5em;
        color: white;
        text-align: center;
        width: 50%;
      }
      body {
        margin: 0;
      }

Web vitals
Sign in
. Don't have Ahrefs?
Subscribe now
or check our 
free SEO tools
.
<div class="container">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
  body {
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: no-wrap;
    }

    .red {
      background: #F57CB1;
    }

    .green {
      background: #EC7070;
    }

    .blue {
      background: #9070EC;
    }

    .container>div {
      font-size: 5vw;
      padding: .5em;
      color: white;
      width: 60%;
    }

<body>
  <div class="container">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
  </div>
</body>
    .container {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: wrap-reverse;
    }

    .red {
      background: #F57CB1;
    }

    .green {
      background: #EC7070;
    }

    .blue {
      background: #9070EC;
    }

    .container>div {

      font-size: 5vw;
      padding: .5em;
      color: white;
      width: 50%;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

从上面的示例中，您可以看到不同值的不同结果。如果将 flex-wrap 的值设置为 wrap，则项目将分配相同的空间。此外，任何超出行范围的项目都将放置在新行中。如果将值设置为 nowrap，则项目将不会被包裹到相同的行中；相反，它们将被隐藏，并且不会显示在弹性容器内。此外，如果将值设置为 wrap-reverse，则项目将以相反的顺序分配空间。

相反，Grid 使用 grid-template-columns 属性中的 min-max 和 auto-fill 函数组合来实现这一点。但在 Grid 中，单元格的大小与 Grid 中所有其他单元格的大小相同。

当有额外可用空间时，输入元素会比其他输入元素增大一倍。在这种情况下，弹性盒布局的效果优于网格布局。因此，对于这种单维布局，弹性盒布局非常合适。

CSS Grid在包裹项目时的工作方式如下：

  <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>  
  .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
div:not(.wrapper) {
  background: #07BCB7;
  padding: 30px 15px
}

  <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>  
 .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
div:not(.wrapper) {
  background: #07BCB7;
  padding: 30px 15px
}

  <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four
    <br>This cell
    <br>Has extra
    <br>content.
    <br>Max is auto
    <br>so the row expands.
    </div>
    <div>Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

.wrapper div {
  background: #07BCB7;
  padding: 30px 15px
} </style>
</head>

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>
.wrapper {
    display: grid;
    grid-template-rows: repeat(3, 200px);
    gap: 10px;
    grid-auto-flow: column;
    grid-auto-columns: 300px 100px;
}

.wrapper div {
  background: #07BCB7;
  padding: 30px 15px
}

从上面的示例可以清楚地看出，您可以使用 CSS 网格将项目分布在任意一个轴或两个轴上。输出将根据您设置的值而变化。

重叠

对于要在弹性框中重叠的项目，您需要研究传统的方法，例如负边距、变换或绝对定位，以突破弹性行为的限制。但是，网格在这方面做得更好。使用网格，您可以将项目放置在重叠的网格线上，甚至可以放置在同一个网格单元内。

利润

弹性盒布局有一个功能，可以将所有内容尽可能地推远。它允许在元素上设置 margin-right: auto ，如果有足够的可用空间，该元素会将所有内容尽可能地推远。这是弹性盒布局独有的功能，在网格布局中是没有的。

太空就业

在某些情况下，弹性项目的尺寸设置会变得很复杂，因为它是由 width、min-width、max-width、flex-basis、flex-grow、flex-shrink、空白和其他属性组合定义的。为此，网格提供了一些有趣的空间占用功能，例如分数单位以及内容打破网格的能力，即使您设置了网格线并将项目放置在网格线内，它们也会直接落入网格中。

CSS Grid 和 Flexbox 中的嵌套

使用 CSS 网格时，当网格容器的显示设置为网格时，只有直接子项才会成为网格项。它们可以放置在创建的网格上，子项将以正常流向显示它们。您可以通过将网格项转换为网格容器来“嵌套”网格。由于这些网格彼此独立，并且独立于父网格，因此它们不会从父网格中获取轨道大小。这使得将嵌套的网格项与主网格对齐变得非常困难。

但是，如果将 grid-template-columns、grid-template-rows 或两者的值设置为 subgrid，嵌套网格将使用父级网格中定义的轨道。在这种情况下，间隙会被继承或被其他间隙值覆盖。此外，网格线名称可以从父级传递到子网格，子网格也可以声明自己的网格线名称。

    <div id="outer-grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div id="inner-grid">
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
            #outer-grid {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 8px;
      }
      #outer-grid > div {
        background-color: #40D6C8;
        color: white;
        font-size: 4vw;
        padding: 8px;
      }
      #inner-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 5px;
      }
      #inner-grid > div {
        background: #008A4D;
        padding: 8px;
      }

  <div class="container">
    <div class="red">1
      <div class="green">1a</div>
      <div class="blue">1b</div>
    </div>
    <div class="green">2</div>
    <div class="blue">3</div>
  </div>
      .container {
      display: flex;
    }

    .red {
      background: rgb(0, 225, 255);
      display: flex;
      flex-direction: column;
    }

    .green {
      background: rgb(65, 144, 240);
    }

    .blue {
      background: rgb(251, 170, 120);
    }

    .container div {
      font-size: 5vw;
      padding: .5em;
      color: white;
      flex: 1;
    }

子网格

CSS Grid（二级布局规范）的 display 属性有一个预定义的子网格值，目前仍处于实验阶段。这个唯一值是一个带有 display: grid 的嵌套网格。

将此值添加到网格容器会将直接子项转换为网格项。然后，这些网格项可以放置在创建的网格中。子项将按正常流向显示。

如果将 grid-template-columns、grid-template-rows 或两者同时设置为 subgrid，网格将使用父级上定义的轨道，而不是创建嵌套网格使用的轨道列表。例如，使用 grid-template-columns: subgrid，嵌套网格跨越父级的三个列轨道，而嵌套网格将拥有三个与父级网格大小相同的列轨道。在这种情况下：

间隙是继承的，但也可以用不同的间隙值覆盖。
线条名称可以从父级传递给子级，子网格也可以声明自己的线条名称。
简而言之，子网格的内容会影响父网格的大小，同时允许内容在两个轴上对齐。

您可以在网格列、网格行或两个维度上使用值子网格，如下例所示：

  <div class="grid">
    <div class="item">
      <div class="subitem1"></div>
      <div class="subitem2"></div>
    </div>
  </div>
      .grid {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(4, minmax(100px, auto));
      background: #ff7b7b;
      border: 3px solid #32f1ff;
      border-radius: 5px;
    }

    .item {
      display: grid;
      grid-column: 2 / 7;
      grid-row: 2 / 4;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      border: 3px solid #e60877;
      border-radius: 6px;
    }

    .subitem1 {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
      background: #aef9d2;
      border-radius: 5px 0px 0px 5px;
    }

    .subitem2 {
      grid-column: 3 / 6;
      grid-row: 1 / 3;
      background: #a3c5f8;
      border-radius: 0 5px 5px 0;
    }

你也可以使用 flexbox 来实现类似的效果，但由于该过程依赖于多种媒体来显示预期的输出，因此过程会变得繁琐且混乱。你需要在父元素上添加 display: flex 属性，从而创建独立的子元素，这些子元素不会继承任何父元素的属性。此外，为了定义它们的特性，每次需要为任何子元素添加样式时，你都需要定义新的父元素。这会导致一个漫长而重复的过程，需要为每个子元素添加更多属性。

CSS Grid 和 Flexbox 中的值继承

在 CSS 网格中，嵌套网格不会继承其父网格的值。这样，更改父网格的值时就不会意外影响嵌套网格。此外，您还可以用不同的值覆盖子网格。网格线名称可以从父网格传递给子网格，子网格也可以声明自己的名称。

相反，使用弹性盒子时，子元素将独立存在，不继承父元素的特性。在设置子元素的样式之前，必须先定义新的父元素。

关注内容布局：CSS 网格

根据 W3 学派的说法， CSS 网格允许用户将应用程序中的元素精确地定位和调整大小，使其位于网格区域中。CSS 网格专注于精确的内容放置，其中每个项目都是一个网格单元，沿垂直和水平轴排列。因此，CSS 网格是控制布局中项目位置的模块。

另一方面，很难预测特定视口下的行为，这可以创造出令人惊叹的效果。虽然你可以设置弹性项目的宽度和高度，但它可能会因为灵活性不足而阻碍进程。

创建不寻常的布局

CSS 网格具有 grid-template-rows 和 grid-template-columns 等属性，以及分数单位等实用工具，可让您精确计算所有内容。此外，无需使用媒体查询即可创建响应式布局。网格使创建诸如破碎、不对称或重叠等特殊布局变得更加简单和轻松。此外，通过添加简单的网格技术，您可以使网格单元换行并适应任何视口大小。

 <div class="grid-container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
    <div class="item-4">4</div>
    <div class="item-5">5</div>
    <div class="item-6">6</div>
  </div>
      .grid-container {
      display: grid;
      grid-template: repeat(3, [row] minmax(120px, 1fr)) / repeat(4, [col] 1fr);
      grid-gap: 20px;
    }

    .item-1,
    .item-2,
    .item-3,
    .item-4,
    .item-5,
    .item-6 {
      align-items: center;
      justify-items: center;
      font-family: 'Overpass', sans-serif;
      font-size: 4em;
      line-height: 1;
      color: white;
    }

    .item-1 {
      grid-column: col 1 / span 4;
      grid-row: row 1;
      background: linear-gradient(to left, #bc97ff, #00aaff);
    }

    .item-2 {
      grid-column: col 4;
      grid-row: row 1 / span 3;
      background: linear-gradient(to right, #f23296, #fe5845);
      opacity: 0.8;
    }

    .item-3 {
      grid-column: col 1;
      grid-row: row 2 / span 2;
      background: linear-gradient(to top, #cc67ff, #9772f3);
      z-index: 1;
      opacity: 0.8;
    }

    .item-4 {
      grid-column: col 2 / span 2;
      grid-row: row 2;
      background: linear-gradient(to left, #26ac17, #63ff7b);
    }

    .item-5 {
      grid-column: col 1;
      grid-row: row 3;
      background: linear-gradient(to top, #1ed5d8, #17f2eb);
    }

    .item-6 {
      grid-column: col 2 / span 3;
      grid-row: row 3;
      background: linear-gradient(to right, #f4ac53, #4308f2);
    }

尽管布局是根据可用空间进行包装的，但它不像弹性盒那样具有内容感知能力，因为项目内部的内容不能灵活地伸展。

关注内容流：Flexbox

与网格不同，弹性盒布局更注重内容流，而不是内容布局。（定义内容流）弹性项目的内容决定了其宽度或高度。弹性项目会根据其内部内容和可用空间进行伸缩。

弹性盒布局让您能够灵活地分配空间和对齐项目。您可以使用 width 或 flex-basis 属性创建固定宽度的弹性项目。但是，这样做会导致弹性盒失去内容感知能力。由于弹性盒会独立处理每一行，因此不同行会根据内部文本的数量以不同的方式对齐弹性项目。

决定内容行为

弹性盒布局 (Flexbox) 允许您决定屏幕空间过大或不足时内容的行为方式。弹性盒布局大小调整功能使创建完全适应屏幕的布局成为可能。使用 flex-grow 和 flex-shrink 属性，您可以实现完全流畅的布局，优化弹性项目在各种视口尺寸下的分配，而无需依赖布局、方向或媒体查询来支持它们。

CSS 网格和弹性框：示例

网络上有很多 CSS Grid 和 Flexbox 的用例示例。我们选择了两个网格创建示例，对两者的用例进行简单比较。

  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  * {
   box-sizing: border-box;
  }
.container { 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100vh;
  flex-wrap: wrap;
  } 
.container > div {
  font-size: 5vw;
  padding: .5em;
  color: white;
  margin: 10px;
  border-radius: 3px;
  background: rgb(182, 191, 244);
  border: 5px solid rgb(139, 71, 255);
}
.container > div:nth-child(odd) {
  width: 10%;
  }
.container > div:nth-child(even) {
  width: 20%;
  }
.container > div:nth-child(2),
.container > div:nth-child(4),
.container > div:nth-child(9) {
  width: 60%;
  }  
body {
  margin: 0;
}

  <main class="grid">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </main>
  .grid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}
.box {
  color: white;
  font-size: 4vw;
  padding: 10px;
  background: rgb(237, 139, 181);
  text-align: center;
}
.box:nth-child(1) {
  grid-column: span 12;
  }
.box:nth-child(2), 
.box:nth-child(3) {
  grid-column: span 6;
  }
.box:nth-child(4),
.box:nth-child(5),
.box:nth-child(6) {
  grid-column: span 4;
  }
.box:nth-child(7),
.box:nth-child(8),
.box:nth-child(9),
.box:nth-child(10) {
  grid-column: span 3;
  }
.box:nth-child(11),
.box:nth-child(12),
.box:nth-child(13),
.box:nth-child(14),
.box:nth-child(15),
.box:nth-child(16) {
  grid-column: span 2;
  }

CSS 网格和弹性框：用例

虽然 CSS Grid 和 Flexbox 的目标相同，但它们的实现过程却有所不同。在某些情况下，CSS Grid 无法与 Flexbox 相比；而在其他情况下，Grid 仍然是最佳选择。以下列出了不同的用例：

-小型设计：如果您使用小型布局来实现较少的行和列，那么 Flexbox 是理想的选择。
对齐项目：当您需要对齐项目时，您所要做的就是使用 display: flex 创建一个容器并定义您需要的弹性方向，并在几分钟内得到您想要的结果。
内容优先设计：如果您要创建一个网站，但对内容的外观并不太清楚，或者您只是想让所有内容都适合布局，那么 flexbox 将是完美的选择。-
对齐项目：当您需要对齐项目时，您所要做的就是使用 display: flex 创建一个容器并定义您需要的弹性方向，并在几分钟内得到您想要的结果。-
内容优先设计：如果您要创建一个网站，但对内容的外观并不太清楚，或者您只是想让所有内容都适合布局，那么 flexbox 将是完美的选择。

诚然，您可以使用 flexbox 创建几乎所有您想要的布局，并获得与 Grid 类似的效果。但为了创建更好的 CSS 方法，以便长期拥有更易于维护的应用程序，最好使用 CSS Grid，因为它可以创建更简洁的布局。CSS Grid 的示例实现如下：

- 复杂设计：当您需要实现更复杂的设计时，最好使用 CSS Grid。它的二维布局系统可以帮助您创建更复杂、更易于维护的网页。-
块项目之间的间隙： Grid 具有更易于访问的 gap 属性，而 flexbox 则没有。此属性允许您定义行和列之间的间隙，而无需使用 margin 属性，如果您使用许多断点，margin 属性会导致问题。-
重叠元素：如前所述，Grid 更擅长重叠元素。您可以使用 grid-row 和 grid-column 属性轻松做到这一点，而 flexbox 仍然需要使用一些技巧，如边距、变换或绝对定位来实现。-
布局优先设计：如果您有一个设计好的布局结构，使用 CSS Grid 会更容易，因为它的二维布局系统可以更容易地定位项目。

在 Flexbox 和 CSS Grid 之间选择使用哪一个可能会让人感到困惑，因为你必须了解它们的方方面面。为了获得最佳效果，首先了解它们的用例会很有帮助。了解用例最有助于你的决策，让你在整个开发过程中无忧无虑。你也可以查看官方文档，了解更多信息和含义，以便就任何用途做出最佳决策。我们衷心希望这篇文章能帮助你一路前行，并让你获得最佳的网页设计体验。

鏂囩珷鏉ユ簮锛�https://dev.to/themewagon/css-grid-and-flexbox-a-brief-juxtaposition-2fa