CSS网格和Flexbox：短暂并置-DEV365 开发者社区

CSS网格和Flexbox是两个CSS布局模块，具有不同的实现技术和用法。 Flexbox主要设计用于在接口和稳定对齐功能中的项目之间分布。相反，CSS网格在将页面分为关键区域或定义HTML基本控制部分之间的大小，位置和层关系方面表现出色。由于现有的相似性，这两者之间的效率提高的问题在网络开发界变得非常突出。

因此，本文将阐明flexbox与CSS网格的区别以及应用程序如何根据需求的变化的总体比较。

汇集

引入CSS网格和Flexbox取代了古老的黑客，以创建页面布局，项目位置和组件的对齐。两个模块都有许多相似之处，因为它们都是显示模块。他们从以不同方法来定义元素的视觉放置的相同目标开始。他们俩都为计算显示测量值铺平了道路。他们类似地实施了辩护和对齐，除了Flexbox使用所有项目的共同属性，而CSS网格为每个项目提供各个属性。

尽管他们打算扮演的角色是相似的，但根据其方法和特征，使用网站中每个布局模型的最佳场合是不同的。在某些情况下，可以使用一种情况，而在某些情况下，一个情况比另一种情况更合适。尽管用例取决于开发人员，但它要求讨论两者之间的差异。有些东西网格更好地做，没有一个人可以与Flexbox竞争。此外，它们可以一起使用，网格项目可以是Flex容器，并且可以将Flex项目用作网格容器。

使用网格可以更好地完成一些工作。一些特定的是：

考虑布局性能原因
制作字面网格需要更少的媒体查询干预措施，具有强大功能，例如自动布局，minmax（），repot（）和自动填充。

但是，仅这些并不能使网格比Flexbox更好。让我们将两者的不同方法推向前进，希望它可以帮助您更好地了解显示模块及其应用程序，并使您的任务更轻松。

方面

Flexbox实质上是在行或列中单个维度中列出项目。网格用于在二维行和列中的项目布局。
Rachel Andrew

Flexbox和CSS网格之间的主要区别在于Flexbox是一维的。 Flexbox沿着水平或垂直轴列出项目，您要在其中决定是要基于行还是基于列的布局。

Flexbox允许元素包装，从而导致曲线的列和行。当元素仅沿单个轴上推动元素时，无法直接决定或有信息控制这些元素的确切位置。

另一方面，CSS网格可以被视为二维，因为它可以自由声明行的大小，然后明确将事物放入它们中。

根据

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

请参见下面的示例，以了解如何针对Flex项目和网格单元进行尺寸。该示例显示了两种不同的方法来构建相同的布局以更好地理解：

使用CSS网格和Flexbox创建相同的布局

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网格直接创建的内容轨道之间的空间。它使您可以使用网格柱隙在没有太多ADO的情况下在网格项目之间创建一个排水沟。关于网格尺寸，差距充当常规网格轨道，尽管没有任何东西可以放在缝隙中。同样，行间的隙和列间隙并不是唯一导致轨道空间的东西。框对齐中空间分布属性的边距，填充物或使用可能有助于可见的间隙。

请参见下面的示例，以了解细胞之间的网格如何利用差距：

flex项目和网格单元之间的差距

CSS flex

<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没有间隙属性。因此，您需要采取一条扭曲的路线以在项目之间添加差距（如上所示）。您需要使用填充容器和嵌套容器，或者在使用Justify-Content属性传播flex-Items时，必须增加弹性容器的宽度。

裹

如果容器内部的项目的总宽度大于容器的宽度，则两个布局模块都可以选择将项目包裹在新行中。 Flexbox和网格的美丽在于能够伸展和挤压。但是每个模块的做法都不同。例如，考虑到每条容器，flex-框用于将项目包裹在多行中。将Flex项目包装并推入新行时，布局算法将它们视为不同flex容器的一部分，并且推送的项目将失去上下文。因此，细胞没有像其他所有细胞一样具有确切的大小。查看下面给出的示例：

flex-wrap：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;
      }

flex-wrap：nowrap

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%;
    }

flex-wrap：wrap-reverse

<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包装的值设置为包装，则将分配相同的空间。另外，任何超出行之外的项目都将在新行中设置。如果将值设置为nowrap，则项目不会包裹在同一行中；取而代之的是，它们被隐藏起来，并且不会在Flex容器中显示。此外，如果将值设置为包裹不逆转，则项目将被分配在相反的连续性中。

相反，网格使用Min-Max和Grid-template-Polumns属性中的Min-Max和自动填充功能的组合来实现此目标。但是在网格中，细胞保持与网格中所有其他细胞相同的大小。

当有额外的空间可用时，与其他输入元素相比，输入元件将增长两次。在这种情况下，FlexBox优于网格。因此，对于这种单维布局，Flexbox非常适合。

这就是 CSS网格的方式在包装项目时工作：

带网格的默认位置

  <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
}

使用minmax（）

进行缩小行

  <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网格在任何或两个轴周围分布项目。输出将根据您设置的值而变化。

重叠

要重叠在Flexbox中的项目，您需要查看传统的东西，例如负边距和转换或绝对定位，以脱离Flex行为。但是，网格更好地做到这一点。使用网格，您可以将项目放在重叠的网格线上，甚至可以在同一网格单元格内。

利润

Flexbox具有尽可能推动所有内容的功能。它允许将保证金权利：自动放在元素上，如果有足够的可用空间，该元素将尽可能地推动所有内容。这是一个独特的Flexbox功能，网格中不可用。

太空就业

在某些情况下，弹性项目的大小变化变得复杂，因为它的定义是宽度，最小宽度，最大宽度，flex-basis，Flex Grow，Flex Grow，Flex-shrink，White Space和其他属性的组合。为此，网格具有有趣的空间占用功能，例如分数单元，以及内容破坏网格的能力，即使您是一个设置网格线并将项目放置在其中的位置的人。

筑巢

在使用CSS网格时，只有直接的孩子将网格容器设置为网格时，只有直接的孩子成为网格项目。它们可以放置在创建的网格上，孩子们将以正常的流程显示它们。您可以通过将网格项目变成网格容器来嵌套网格。由于这些网格独立于父栅格，因此它们不会从父栅格中获得轨道尺寸。这使得与主要网格的嵌套网格项目充满挑战。

但是，如果您在网格板柱上设置值子格里德，则将网格 - 板行或两者兼有，则嵌套网格使用父母定义的轨道。在这种情况下，差距是继承或覆盖的，具有不同的差距值。此外，可以将行名从父级传递到子格里德，并且子格里德还可以声明其自己的行名。

用网格嵌套

    <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;
      }

用flex

  <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网格（2级布局规范）具有显示属性的预定义子网格值，该值仍在实验阶段。这个独特的值是带有显示的嵌套网格：网格。

将此值添加到网格容器中，将直接儿童变成网格项目。然后可以将项目放置在创建的网格中。儿童以正常流程显示。

在网格 - 板块柱，网格 - 板行或两者兼而有之，网格使用嵌套网格使用的新曲目。例如，使用网格 - 板块柱：子格里德，而嵌套的网格跨越父的三列轨道，嵌套网格将具有与父栅格相同的三个列轨道。在这种情况下 -

间隙是继承的，但也可以用不同的差距值覆盖。
行名可以从父母传递给孩子，子格里德还可以声明自己的行名。
简而言之，子网格的含量会影响父栅格的尺寸，同时允许内容对齐两个轴。

您可以在网格列，网格行或两个维度上使用值subgrid，如下实例：

用CSS网格创建子网格

  <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做类似的事情，尽管该过程却杂乱无章，因为该过程取决于许多媒体以显示预期的输出。您需要添加显示：对父母的flex，创建独立的孩子，这些孩子不会继承任何父属性。此外，要定义它们的特征，您需要在每次需要为任何孩子设计时定义较新的父件。这导致了一个漫长的重复过程，以在每个项目中添加更多属性。

价值的继承

在CSS网格中，您的嵌套网格不会从其父网格继承值。这使得可以更改母网，而不会意外影响嵌套的网格。另外，您可以覆盖具有不同价值的孩子。线名可以从父母传给孩子，子格里德可以声明自己的名字。

相反，在使用Flexbox时，孩子将是独立的，并且不会带有父母的特征。在您必须定制任何孩子之前，必须定义较新的父母。

关注内容放置：CSS网格

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

另一方面，很难预测某些视口的行为，这可以创造出惊人的结果。尽管您可以设置Flex项目的宽度和高度，但它可以通过较小的灵活性来阻碍该过程。

创建异常的布局

css网格具有诸如网格 - 板行和网格 - 板块柱和诸如分数单元之类的实用程序之类的属性，可让您精确地计算所有内容。此外，可以在不使用媒体查询的情况下创建响应式布局。网格使创建异常的布局，例如破碎，不对称或重叠的简单和轻松。此外，通过添加简单的网格技术，您可以制作网格单元格并适应任何视口尺寸。

用网格创建异常布局

 <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那样内容，因为项目内部的内容并不能灵活地伸展。

关注内容流：Flexbox

与网格不同，Flexbox专注于内容流，而不是关注内容放置。（定义内容流）项目的内容确定flex项目的宽度或高度。弹性项目根据其内部内容和可用空间而生长和收缩。

Flexbox使您可以灵活地分配空间和对齐项目。您可以使用宽度或Flex-BASIS属性来制作固定宽度弹性项目。但是，这样做会导致Flexbox内容意识的丧失。由于Flexbox独立处理每行，因此不同的行根据内部文本数量不同。

。

决定内容行为

Flexbox允许您确定屏幕上太多或没有足够的空间时的内容的行为方式。 Flexbox尺寸使创建布局完全适应屏幕。使用Flex Grow和Flex-Shrink属性，您可以实现完全流体的布局，该布局在每个视口尺寸上优化了flex项目的分配，而无需依赖布局和方向或媒体查询来支持它们。

Flexbox网格与CSS网格示例

网络上的CSS网格和Flexbox都有许多用例示例。我们选择了两个创建网格的示例，以在两个用例之间进行简单比较。

使用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;
}

使用CSS网格创建随机网格

  <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网格和Flexbox相同，但它们在实施过程中彼此不同。在某些情况下，CSS网格无法与Flexbox进行比较。在其他情况下，网格仍然是最好的。下面指出了不同的用例：

-small Design： Flexbox是理想的选择，如果您使用一个小的布局来实现以更少的行和列实现。
对齐项目：当您需要对齐项目时，您所要做的就是使用显示器创建一个容器：flex和定义需求的弹性方向，并在几分钟内获得所需的东西。
内容首先设计：如果您要创建一个对内容的外观低下的网站，或者如果您只想将所有内容放在布局中，则FlexBox将是可使用的完美盒子。

- 单位项目：当您需要对齐项目时，您所要做的就是使用显示器创建一个容器：flex和定义您的需求的弹性方向，并在几分钟内获得所需的东西。
-Content-First Design：如果您要创建一个对内容的看法低下的网站，或者如果您只想在布局中适应所有内容，则Flexbox将是完美的一个可以使用的。

是真的，您将能够使用Flexbox创建几乎所有的布局，并获得与网格相似的结果。但是，要创建一种更好的CSS方法来长期拥有更可维护的应用程序，最好使用CSS网格，因为它可以创建更简洁的布局。 CSS网格的示例实现如下：

- 复杂的设计：当您实施更复杂的设计时，最好使用CSS网格。它的二维布局系统可帮助您创建更复杂和可维护的网页。
- 块项目之间的gap：网格具有更容易访问的间隙属性，在Flexbox中不可用。此属性允许您在行之间定义行之间的差距，而不必使用保证金属性，如果您使用许多断点，则会引起问题。
- 重叠元素：如前所述，网格在重叠元素方面更好。您可以通过网格行和网格列属性轻松地进行操作，而Flexbox仍然需要使用边距，变换或绝对定位等一些骇客。
-layout-Inst设计：如果您具有设计的布局结构，则将更容易使用CSS网格，因为其二维布局系统使定位项目更容易。

选择在Flexbox和CSS网格之间使用一个，因为您必须知道它们的每个角落和裂缝。首先学习用例以获得最佳结果是有帮助的。学习用例最有助于您的决定，并使您一直无焦虑的发展。您还可以检查官方文件以获取更多信息和含义，以对任何用途做出最佳决定。我们诚挚地希望这篇文章会带您一路走来。