欢迎大家来到IT世界,在知识的湖畔探索吧!

1. 简介

1.1 什么是CSS布局？

CSS布局（Cascading Style Sheets layout）指的是通过使用CSS样式来控制网页中元素的布局方式。

在网页设计中，布局是非常重要的一个方面，因为它决定了网页中内容的呈现方式，对网页的可读性、可用性和美观性都有着重要的影响。

在CSS的发展过程中，出现了许多不同的布局方案，其中Flex布局和Grid布局是最常用的两种布局方式。

通过使用CSS布局，开发者可以通过少量的代码来快速而有效地实现自己所需要的布局效果。

1.2 为什么使用CSS布局？

使用CSS布局有许多好处，以下是其中的几个主要原因：

1. 统一风格：使用CSS布局可以确保网页的各个部分在不同浏览器和设备上看起来一致，避免了由于不同设备或浏览器的不同特性导致的页面混乱的情况。
2. 简化代码：使用CSS布局可以大大简化HTML代码，通过统一的布局方式可以减少重复代码，提高了开发效率，减轻了开发工作的负担。
3. 增强可读性：使用CSS布局可以使网页代码更加清晰和易于理解，开发者可以通过对样式的修改来达到想要的效果，而无需直接修改HTML代码，使得代码的维护更加容易。
4. 响应式设计：使用CSS布局可以实现响应式设计，即通过设置不同的样式规则来适应不同的设备和屏幕尺寸，使得网页可以在不同的设备和屏幕上都能够完美显示，提高了用户体验。

2. Flex布局

2.1 什么是Flex布局？

Flex布局是一种基于CSS3的新的布局方式，它可以方便地实现元素的弹性布局，即使在不同的屏幕尺寸和不同的设备上，元素也可以按照预期的方式自适应地伸缩和排列。

简单来说，Flex布局使得容器的尺寸可以自适应，元素可以像弹簧一样自动填充到容器中，并且可以很方便地控制元素的排列方式和对齐方式，实现各种复杂的布局效果。

Flex布局的核心是Flex容器和Flex项目。

• Flex容器是指一个元素，它的所有子元素都会成为Flex项目。
• Flex项目是指Flex容器中的子元素，可以按照一定的规则进行排序和排列。

Flex容器有一系列的属性可以控制容器的排列方式，Flex项目也有一些属性可以控制项目的大小和位置。

通过灵活的控制这些属性，可以实现各种复杂的布局效果，例如水平居中、垂直居中、等分布局、换行、流式布局等。

2.2 Flex容器和Flex项目

Flex容器和Flex项目是Flex布局的两个基本元素，它们有不同的属性和作用：

1. Flex容器

Flex容器是Flex布局中的父容器，用于包含Flex项目。通过定义Flex容器的属性，可以控制Flex项目在容器中的排列方式和对齐方式。

常见的Flex容器属性包括：

• display：定义Flex容器的类型，默认为flex。
• flex-direction：定义Flex项目在Flex容器中的排列方向，可以是row、row-reverse、column或column-reverse。
• justify-content：定义Flex项目在Flex容器中的水平对齐方式，可以是flex-start、flex-end、center、space-between或space-around。
• align-items：定义Flex项目在Flex容器中的垂直对齐方式，可以是flex-start、flex-end、center、baseline或stretch。
• align-content：定义Flex项目在多行或多列的容器中的垂直对齐方式，仅在有多个Flex行或Flex列时生效，常用的取值包括flex-start、flex-end、center、space-between、space-around和stretch。

2. Flex项目

Flex项目是Flex容器中的子元素，不同的Flex项目可以按照一定的规则排序和排列。通过定义Flex项目的属性，可以控制项目在容器中的大小、位置和排序方式。

常见的Flex项目属性包括：

• flex-grow：定义项目的放大比例，默认为0，不会被放大。
• flex-shrink：定义项目的缩小比例，默认为1，即当空间不足时，Flex项目压缩大小，以适应容器。
• flex-basis：定义项目在分配多余空间之前的基准大小，默认为auto，即根据项目内容自动计算大小。
• flex：flex-grow、flex-shrink和flex-basis的缩写，可以同时设置这三个属性。
• order：定义项目的排列顺序，数值越小越靠前，默认为0。

通过组合使用Flex容器和Flex项目的属性，我们可以轻松实现各种灵活的布局效果，使得网页可以适应不同的设备和屏幕大小，提高网页的可读性和用户体验。

2.3 Flex容器的属性

2.3.1 flex-direction

flex-direction是Flex布局中比较重要的一个属性，用于指定Flex容器中Flex项目的排列方向。

该属性接受四个值：row、row-reverse、column和column-reverse，分别代表水平方向从左到右排列、水平方向从右到左排列、垂直方向从上到下排列和垂直方向从下到上排列。

默认情况下，flex-direction属性的值为row，即水平方向从左到右排列。

该属性可以与其他的Flex容器属性如justify-content和align-items联合使用，来实现不同的Flex项目布局效果。例如，

• 当flex-direction: row时，justify-content属性可以设置Flex项目在主轴上（水平方向）的对齐方式，align-items属性可以设置Flex项目在交叉轴上（垂直方向）的对齐方式；
• 而当flex-direction: column时，则相反，justify-content属性可以设置Flex项目在交叉轴上（水平方向）的对齐方式，align-items属性可以设置Flex项目在主轴上（垂直方向）的对齐方式。

需要注意的是，使用flex-direction属性可以通过改变Flex容器中Flex项目的排列方式，来实现各种布局效果，但并不会影响Flex项目的大小和位置，需要使用其他的Flex项目属性来进一步控制。

2.3.2 justify-content

justify-content是Flex布局中比较常用的一个属性，用于控制Flex项目在Flex容器的主轴上的对齐方式。该属性接受5个值：

• flex-start：左对齐（默认值）。
• flex-end：右对齐。
• center：居中对齐。
• space-between：两端对齐，Flex项目之间的间隔相等。
• space-around：均匀对齐，Flex项目之间的间隔相等。

需要注意的是，justify-content属性只对Flex容器中的Flex项目在主轴方向上的位置进行对齐，不影响在交叉轴方向上的位置。该属性通常与flex-direction联合使用，来控制Flex项目在不同方向上的对齐方式。

另外，如果Flex项目是可以换行的，即使用了flex-wrap: wrap等属性，justify-content属性也会影响换行后的Flex项目对齐方式。例如，如果在Flex容器中有多个Flex项目，当空间不足时，Flex项目会自动换行，此时可以使用align-content属性控制多行的Flex项目在交叉轴上的对齐方式。和justify-content类似，align-content同样接受5个值，分别对应不同的对齐方式。

2.3.3 align-items

align-items是Flex布局中用于控制Flex项目在Flex容器的交叉轴方向上的对齐方式的属性。该属性接受5个值：

• flex-start：Flex项目在交叉轴的起始位置对齐（默认值）。
• flex-end：Flex项目在交叉轴的结束位置对齐。
• center：Flex项目在交叉轴的中间位置对齐。
• baseline：Flex项目在基线（baseline）上对齐。
• stretch：Flex项目在交叉轴上拉伸，占满容器的高度。

需要注意的是，align-items属性只影响Flex项目在交叉轴上的对齐方式，不影响在主轴方向上的位置。该属性通常与flex-direction联合使用，来控制Flex项目在不同方向上的对齐方式。

另外，如果Flex项目是可以换行的，即使用了flex-wrap: wrap等属性，align-items属性也会影响换行后的Flex项目对齐方式。如果Flex容器有多行Flex项目，可以使用align-content属性控制多行的Flex项目在交叉轴上的对齐方式。详见align-content的解释。

2.3.4 align-content

align-content属性用于控制Flex容器中多行大于一行的的Flex项目在交叉轴方向上的对齐方式。该属性只对多行的Flex项目有效，对于单行Flex项目无效。align-content属性接受5个值：

• flex-start：多行Flex项目在交叉轴的起始位置对齐。
• flex-end：多行Flex项目在交叉轴的结束位置对齐。
• center：多行Flex项目在交叉轴的中间位置对齐。
• space-between：多行Flex项目沿交叉轴均匀分布。
• space-around：多行Flex项目沿交叉轴均匀分布，项目之间的距离也相等。
• stretch：多行Flex项目在交叉轴上拉伸，填满整个Flex容器的高度（默认值）。

需要注意的是，align-content属性只对多行的Flex项目在交叉轴上的对齐方式进行控制，不会对单行的Flex项目进行影响。并且，该属性只有在flex-wrap属性设置为wrap（意味着Flex项目在Flex容器中可以换行）时才有效，否则无论多少行的Flex项目都只有一行。

此外，align-content属性可以和align-items属性配合使用来对多行的Flex项目在交叉轴方向上进行完整的控制，在一些特殊场景下可能会有更好的效果。

2.4 Flex项目的属性

2.4.1 flex-grow

flex-grow是Flex布局中一种用于控制Flex项目占据剩余空间的属性。该属性定义了当剩余空间不足时，Flex项目是否拉伸以填满剩余空间的比例。flex-grow属性的值必须是非负数，默认值为0，表示当空间不足时Flex项目不进行拉伸，并且剩余空间被Flex容器中的其他Flex项目所占据。

默认情况下，Flex项目根据其在Flex容器中的排序顺序来进行分配空间，因此，如果Flex项目未设置flex-grow属性，将按照默认值为0予以处理。而当Flex项目设置了flex-grow属性后，剩余的空间将按照Flex项目的flex-grow属性来分配。

flex-grow属性的计算方式如下：

• 将所有不设置flex-grow属性的Flex项目的flex-grow属性值设为0。
• 计算剩余空间：容器的可用空间减去所有Flex项目的基准空间（即Flex项目的占据的空间或者flex-basis属性值）。
• 将所有Flex项目的flex-grow属性值相加， 计算出所有Flex项目在剩余空间中所占的比例。例如，如果所有Flex项目的flex-grow值之和是3，那么每个Flex项目在剩余空间中所占的比例就是”1/3″。
• 将每个Flex 项目的flex-grow值乘以该Flex项目在剩余空间中占据的比例，从原有的基准空间中分配给该Flex项目。

需要注意的是， flex-grow属性仅在Flex项目有剩余空间时才有效。当Flex项目的基准空间已经完全覆盖了其分配的空间时，flex-grow属性将不起作用。

2.4.2 flex-shrink

flex-shrink是Flex布局中一种用于控制Flex项目收缩的属性。

该属性定义了当空间不足时，Flex项目是否缩小以适应剩余空间的比例。

flex-shrink属性的值必须是非负数，默认值为1，表示当空间不足时Flex项目进行收缩。

当Flex项目的总长度大于Flex容器的长度时，剩余宽度将按照Flex项目设置的flex-shrink属性值进行分配。理解flex-shrink属性的关键就是理解Flex项目的收缩比例。

每个Flex项目的收缩比例等于其flex-shrink属性值除以所有Flex项目的flex-shrink属性值之和。例如，假设Flex容器的宽度为100px，其中有三个Flex项目，设置了flex-shrink属性的值分别为1、2和3，则这三个Flex项目的收缩比例分别为1/6、2/6和3/6，容器中每个Flex项目的宽度将分别减少100px * (1/6)、100px * (2/6)和100px * (3/6)。

需要注意的是，flex-shrink属性仅在Flex项目的基准空间（即Flex项目的flex-basis属性值）大于其占据的空间时才有效。此外，flex-shrink属性的值的大小将影响Flex项目的收缩比例，并且如果所有Flex项目的flex-shrink属性值都设置为0，则表示Flex项目不能缩小，不会根据剩余空间的大小调整Flex项目的大小。

2.4.3 flex-basis

flex-basis是Flex布局中一种定义Flex项目基准空间的属性。它指定了Flex项目在Flex容器内占据的空间，以及在计算Flex项目的flex-grow和flex-shrink属性时所使用的基础空间。如果未指定flex-basis属性，则该属性默认为auto，其大小由Flex项目的内容决定。

flex-basis属性的值可以是一个长度值、一个百分比值、一个关键字auto或一个关键字content。长度值和百分比值指定了Flex项目在Flex容器内占据的精确空间大小，而auto值表示由Flex项目的实际大小决定，而content表示由Flex项目的内容决定。

flex-basis属性通常与flex-grow和flex-shrink属性一起使用，以定义Flex项目的收缩和拉伸比例。当需要对Flex容器中的Flex项目进行收缩或拉伸时，Flex容器计算出每个Flex项目的基准空间（即flex-basis属性的值），并将它们的大小相加得到Flex容器的总基础空间。Flex容器剩余的空间将根据每个Flex项目的flex-grow和flex-shrink属性值进行分配。

需要注意的是，当flex-basis属性设置为content时，Flex项目的大小取决于其内容的大小，并且flex-grow和flex-shrink属性不再起作用。因此，如果希望Flex项目能够根据其内容的大小自适应，可以为其设置flex-basis: content。

2.4.4 order

order是Flex布局中用于指定Flex项目排列顺序的属性。它可以控制Flex项目的排列顺序，实现Flex项目在显示时的前后位置变化，适用于所有Flex项目。该属性的值越小，Flex项目的排列顺序就越靠前，默认值为0。

order值可以是任何整数，包括负整数。负数值最靠前，整数值最靠后。如果两个Flex项目具有相同的order值，则它们将按照在Flex容器中的正常位置顺序排列。

这个属性有些特点，可以通过改变order来调整Flex项目的显示顺序，而无需改变它们在HTML源代码中的位置。这可以让开发人员更容易地管理和维护Flex项目，并使Flex布局更具灵活性。

需要注意的是，order属性的值不影响Flex项目的实际大小或所占空间，仅影响其在Flex容器中的显示顺序。

3. Grid布局

3.1 什么是Grid布局？

Grid布局是一种用于网格化布局Web页面的CSS布局模块，它允许开发者将页面分割成行和列，并使页面中的元素具有更灵活和精确的定位。

使用Grid布局，开发者可以自由地将页面分成多个区域，然后在这些区域中放置内容模块。每个区域的尺寸可以由开发者自己决定，而且不同区域之间的尺寸也可以互不相同，在这一点上，Grid布局非常类似于传统的框格布局。

Grid布局中的重要概念包括网格（grid）、网格项（grid item）、行（row）、列（column）、行轨（row track）、列轨（column track）、单元格（cell）和间隙（gap）等等。通过使用这些概念，开发者可以精确控制网格中每个网格项的大小和位置，从而实现更具有创意和艺术性的页面设计。

Grid布局广泛用于复杂的Web页面布局，比如新闻门户，电商网站等等。由于它提供了灵活和精确的定位方式，使得它在业内越来越受到欢迎，并且在CSS布局的发展历程中扮演着非常关键的角色。

3.2 Grid容器和Grid项目

在Grid布局中，Grid容器和Grid项目是两个核心概念。

Grid容器是应用Grid布局的元素，它可以定义为一个具有display: grid或display: inline-grid属性的元素。在Grid容器内部，可以通过定义网格（grid）来划分网格区域，从而实现网格化布局。

Grid项目是Grid容器中的元素，它们被放置于网格之中，在行和列之间进行布局。每个Grid项目可以被访问并控制，其位置和大小可以精确地指定。在Grid项目中，还可以通过grid-row和grid-column属性来设置对应的行和列，也可以使用grid-area属性来同时设置行、列、起始以及结束位置。

在Grid容器中，可以使用grid-template-rows和grid-template-columns属性来定义网格的行和列，从而确定网格的大小和列数。Grid容器中的网格可以具有不同的大小、位置和间隔，开发者可以通过指定网格的行和列来精确控制每个Grid项目在网格中的位置和大小。

通过使用Grid容器和Grid项目，开发者可以快速建立复杂且精细的网格布局，轻易地实现类似于表格布局的效果，而不必在HTML代码中嵌套大量的div元素，提高了页面布局的灵活性和可读性。

3.3 Grid容器的属性

3.3.1 grid-template-rows和grid-template-columns

在Grid布局中，grid-template-rows和grid-template-columns属性用于定义Grid容器的行和列的大小、数量以及属性。

grid-template-rows属性可以指定每一行的高度，也可以使用重复函数（repeat()）来定义重复性较高的行及其属性。例如，以下代码定义了一个包含三行的Grid容器，其中第一行高度为50像素，第二行和第三行的高度为自适应高度：

grid-template-rows: 50px auto auto;

欢迎大家来到IT世界,在知识的湖畔探索吧!

grid-template-columns属性则可以指定每一列的宽度，同样也可以使用repeat()函数来定义多个重复的列。例如，以下代码定义了一个包含四个列的Grid容器，其中第一列宽度为25%，第二列和第三列的宽度为自适应宽度，第四列的宽度为20%：

欢迎大家来到IT世界,在知识的湖畔探索吧!grid-template-columns: 25% auto auto 20%;

同时，grid-template-rows和grid-template-columns属性也支持使用像素（px）、百分比（%）、em、rem等单位来定义宽度和高度。它们还允许使用minmax()函数来限制网格轨道的大小，也可以使用fr单位来设置根据可用空间计算的比例系数。

在grid-template-rows和grid-template-columns属性中，使用空格或斜线符号的组合来表示相邻的列和行。例如，下面的代码演示了通过在grid-template-rows和grid-template-columns属性中使用空格和斜线符号，定义一个包含不同大小网格的Grid容器：

.grid {
  display: grid;
  grid-template-rows: 200px 100px 150px;
  grid-template-columns: 100px 1fr 2fr 100px;
}

.item-1 {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

.item-2 {
  grid-row: 1 / 2;
  grid-column: 3 / 5;
}

.item-3 {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

.item-4 {
  grid-row: 3 / 4;
  grid-column: 4 / 5;
}

通过以上代码，我们可以看到grid-template-rows和grid-template-columns属性提供了灵活的方式来定义网格的大小、资产和数量等，从而实现更精细化和灵活的布局。

3.3.2 grid-template-areas

grid-template-areas属性是Grid布局中用于定义网格区域的一种方式，它允许开发者通过在Grid容器中使用名称来定义一组网格区域，并将这些网格区域分配给特定的Grid项目。

使用grid-template-areas属性，我们可以在Grid容器中定义名称为字符串的矩阵。例如：

欢迎大家来到IT世界,在知识的湖畔探索吧!grid-template-areas:
  "header header header"
  "sidebar content content"
  "footer footer footer";

在这个例子中，我们定义了一个三行三列的网格区域，每个区域被命名为header、sidebar、content和footer。然后，我们可以将Grid项目安排到这些命名区域中，如下所示：

grid-area:
  header header header
  sidebar content content
  footer footer footer;

在这个例子中，我们按照定义的网格区域名称，将Grid项目分配到header、sidebar、content和footer的相应网格区域中。与使用grid-row和grid-column属性相比，使用grid-template-areas可以更直观地表示网格布局结构，方便开发者快速创建并修改复杂网格布局。

需要注意的是，使用grid-template-areas属性时必须使用相同数量的名称来定义网格区域，如果定义的网格区域不相等，则网格不会正确地显示。此外，如果不希望使用矩阵定义网格区域，则可以使用grid-row和grid-column属性来分配网格项目的位置。

3.3.3 grid-auto-rows和grid-auto-columns

在使用Grid布局时，grid-auto-rows和grid-auto-columns属性可用于给未定义行和列设置高度或宽度。这两个属性与grid-template-rows和grid-template-columns属性有所不同，它们的作用是处理那些没有显式声明大小的网格轨道。

grid-auto-rows属性用于给未定义的行设置默认的高度。这个属性可以使用任何长度单位来设置高度的大小。例如，以下代码将未定义的行的高度设置为50像素：

grid-auto-rows: 50px;

grid-auto-columns属性用于给未定义的列设置默认的宽度。同样，这个属性也可以使用任何长度单位来设置宽度的大小。例如，以下代码将未定义的列的宽度设置为100像素：

grid-auto-columns: 100px;

在实际开发中，有的时候只定义了行和列的一部分，而剩余的部分则通过grid-auto-rows和grid-auto-columns属性来设置网格轨道的大小。这样就可以精确控制所有网格轨道的大小，从而更好地实现网格布局。

需要注意的是，如果一个网格单元格跨越了不止一个未定义的行或列，则需要在grid-auto-rows和grid-auto-columns属性中设置足够的大小为其提供足够的空间。因此，在设计网格化布局时应该根据具体情况，谨慎地定义这两个属性的值，以满足网格布局的需求。

3.3.4 grid-auto-flow

在Grid布局中，grid-auto-flow属性可用于控制自动生成的网格布局方式。

grid-auto-flow属性的默认值为row，它表示Grid项目在容器中的自动流动方式按照行的顺序排列。也就是说，从左到右，从上到下。如果我们要改变这种默认流动方式，可以在grid-auto-flow属性中，设置为column表示按照列的顺序排列，也就是从上到下，从左到右；设置为dense表示自动填充未占用的网格区域，以最大程度利用空间。

例如，下面是一个包含了10个Grid项目的Grid容器，我们通过grid-auto-flow: row dense将自动流程设置为按行排列和稠密占用未使用的区域：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
}

.item {
  background-color: #ccc;
  height: 100px;
  width: 100px;
}

在上面例子中，我们将Grid容器的自动流程设置为按行自动流动，并指定了dense选项。当Grid项目的尺寸或位置不规则时，dense选项将占用未使用的网格区域，以最大程度利用Grid容器中的空间。

总的来说，grid-auto-flow属性提供了很多的自由度，使得我们在网格布局中更加灵活地控制Grid项目之间的位置和流动方式。

3.3.5 grid

grid是CSS中，用于设置Grid布局的简写属性。它可用于一次性设置所有与Grid布局有关的属性，包括grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow以及与Grid项目相关联的属性。

当使用grid属性时，需要将这些属性的值通过空格、斜线或字符串的形式连接起来。例如以下代码实现一个包含三行三列网格布局的Grid容器，其中第二行和第三行的高度为自适应高度：

grid: 
  "A B C" 100px
  "D E F" auto
  "G H I" auto / 1fr 2fr 1fr;

在这个例子中，我们首先定义了一个3×3的网格布局，其中第二行和第三行的高度设置为auto，其余行的高度为100像素。然后，我们使用斜线符号将行属性和列属性分开，并使用1fr、2fr和1fr将列进行均分。最终，我们将grid-template-areas属性省略掉了，因为我们不需要给每个网格区域命名。

grid属性可以简化CSS样式表的书写，将所有与Grid布局相关的代码组织在一起，更便于开发者的编写和维护。

3.4 Grid项目的属性

3.4.1 grid-row-start

grid-row-start是Grid布局中用于指定网格项开始放置行的起点位置的属性。它可以接受数字和关键字值作为输入，并与其他 Grid 属性联合使用，以指定网格项放置和调整它在 Grid 容器中的位置的方式。

具体来说，grid-row-start属性指定网格项开始放置的行的起点位置。它可以接受以下类型的值：

• <line-number>：具有整数值的表示行线的编号，从 1 开始（类似于grid-row: <line-number> / <line-number>;）
• <custom-ident>：自定义标识符的名称（类似于grid-row: <custom-ident>;）
• span <number>：指定网格项横跨多少个单元格（类似于grid-row: span <number>;）
• span <custom-ident>：指定网格项横跨多少个命名的行（类似于grid-row: span <custom-ident>;）

例如，以下代码显示了一个简单的 Grid 布局，其中两个网格项跨越两个行：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}

.item1 {
  background-color: red;
  grid-row-start: 1;
  grid-row-end: 3;
}

.item2 {
  background-color: blue;
  grid-row: 2 / 4;
}

在这个例子中，我们定义了一个3列2行的 Grid 容器，并设置了两个子元素，其中一个元素跨越了第1行和第2行，另一个元素跨越了第2行和第3行。其中，.item1 等价于 grid-row-start: 1; grid-row-end: 3;，.item2 等价于 grid-row: 2 / 4;。这两种写法都可以达到同样的效果，其中 grid-row 是 grid-row-start 和 grid-row-end 的简写方式。

3.4.2 grid-row-end

grid-row-end是Grid布局中用于指定网格项结束放置行的终点位置的属性。它可以接受数字和关键字值作为输入，并与其他 Grid 属性联合使用，以指定网格项放置和调整它在 Grid 容器中的位置的方式。

具体来说，grid-row-end属性指定网格项结束放置的行的终点位置。与grid-row-start不同的是，grid-row-end属性接受的值的范围是从指定的起点位置到下一个位置。它可以接受以下类型的值：

• <line-number>：具有整数值的表示行线的编号，从 1 开始（类似于grid-row: <line-number> / <line-number>;）
• <custom-ident>：自定义标识符的名称（类似于grid-row: <custom-ident>;）
• span <number>：指定网格项横跨多少个单元格（类似于grid-row: <line-number> / span <number>;）
• span <custom-ident>：指定网格项横跨多少个命名的行（类似于grid-row: <line-number> / span <custom-ident>;）

例如，以下代码显示了一个简单的 Grid 布局，其中一个网格项跨越了两个行：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}

.item {
  background-color: red;
  grid-row-start: 1;
  grid-row-end: 3;
}

在这个例子中，我们定义了一个3列2行的 Grid 容器，并设置了一个子元素，它跨越了第1行和第2行，并占用了所有列。其中，.item 的起点为第1行，终点为第3行。如果仅使用grid-row属性，则等价于grid-row: 1 / 3;。

总的来说，grid-row-end属性非常适合于定义跨越多行或多列的网格项，以及在 Grid 容器中调整网格项的位置和大小。

3.4.3 grid-column-start

grid-column-start是Grid布局中用于指定网格项开始放置列的起点位置的属性。它可以接受数字和关键字值作为输入，并与其他 Grid 属性联合使用，以指定网格项放置和调整它在 Grid 容器中的位置的方式。

具体来说，grid-column-start属性指定网格项开始放置的列的起点位置。它可以接受以下类型的值：

• <line-number>：具有整数值的表示列线的编号，从 1 开始（类似于grid-column: <line-number> / <line-number>;）
• <custom-ident>：自定义标识符的名称（类似于grid-column: <custom-ident>;）
• span <number>：指定网格项横跨多少个单元格（类似于grid-column: span <number>;）
• span <custom-ident>：指定网格项横跨多少个命名的列（类似于grid-column: span <custom-ident>;）

例如，以下代码显示了一个简单的 Grid 布局，其中两个网格项跨越了两个列：

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: 100px 100px;
}

.item1 {
  background-color: red;
  grid-column-start: 1;
  grid-column-end: 3;
}

.item2 {
  background-color: blue;
  grid-column: 2 / 4;
}

在这个例子中，我们定义了一个3列2行的 Grid 容器，并设置了两个子元素，其中一个元素跨越了第1列和第2列，另一个元素跨越了第2列和第3列。其中，.item1 等价于 grid-column-start: 1; grid-column-end: 3;，.item2 等价于 grid-column: 2 / 4;。这两种写法都可以达到同样的效果，其中 grid-column 是 grid-column-start 和 grid-column-end 的简写方式。

总的来说，grid-column-start属性非常适合于在 Grid 容器中定义跨越多行或多列的网格项，以及调整网格项的位置和大小。

3.4.4 grid-column-end

grid-column-end是Grid布局中用于指定网格项结束放置列的终点位置的属性。它可以接受数字和关键字值作为输入，并与其他 Grid 属性联合使用，以指定网格项放置和调整它在 Grid 容器中的位置的方式。

具体来说，grid-column-end属性指定网格项结束放置的列的终点位置。与grid-column-start不同的是，grid-column-end属性接受的值的范围是从指定的起点位置到下一个位置。它可以接受以下类型的值：

• <line-number>：具有整数值的表示列线的编号，从 1 开始（类似于grid-column: <line-number> / <line-number>;）
• <custom-ident>：自定义标识符的名称（类似于grid-column: <custom-ident>;）
• span <number>：指定网格项横跨多少个单元格（类似于grid-column: <line-number> / span <number>;）
• span <custom-ident>：指定网格项横跨多少个命名的列（类似于grid-column: <line-number> / span <custom-ident>;）

例如，以下代码显示了一个简单的 Grid 布局，其中一个网格项跨越了两个列：

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: 100px 100px;
}

.item {
  background-color: red;
  grid-column-start: 1;
  grid-column-end: 3;
}

在这个例子中，我们定义了一个3列2行的 Grid 容器，并设置了一个子元素，它跨越了第1列和第2列，并占用了所有行。其中，.item 的起点为第1列，终点为第3列。如果仅使用grid-column属性，则等价于grid-column: 1 / 3;。

总的来说，grid-column-end属性非常适合于在 Grid 容器中定义跨越多行或多列的网格项，以及调整网格项的位置和大小。

3.4.5 grid-row和grid-column

grid-row和grid-column是Grid布局中的简写属性，可以同时指定网格项开始放置的行和列，以及结束放置的行和列。grid-row和grid-column属性均由两个值组成，第一个值表示开始位置，第二个值表示结束位置。

这两个属性可以接受以下类型的值：

• <line>：表示表示网格线的编号或自定义名称；
• span <number>：表示跨越多少个网格线；
• span <name>：表示跨越多少个自定义名称的网格线。

例如，以下代码展示了如何使用grid-row和grid-column属性：

.item {
  grid-row: 1 / 3; /* 从第1行到第3行 */
  grid-column: 2 / 4; /* 从第2列到第4列 */
}

在这个例子中，我们定义了一个.item元素，使用grid-row属性指定了该元素应该跨越从第1行到第3行，在列方向上使用grid-column属性指定了该元素应该跨越从第2列到第4列。这意味着该元素将占用第1、2行和第2、3、4列的所有单元格。

总的来说，使用grid-row和grid-column属性能够使网格项的位置和大小更加直观地描述，并且更容易调整。

3.4.6 grid-area

grid-area是Grid布局中用于同时指定网格项开始放置的行和列以及结束放置的行和列的简写属性。它可以接受数字和关键字值作为输入，并与其他 Grid 属性联合使用，以指定网格项放置和调整它在 Grid 容器中的位置的方式。

grid-area属性由4个值组成，分别表示网格项的开始行、开始列、结束行和结束列。可以使用下列三种方法指定grid-area属性的值：

• 使用数值和斜线指定起始行和起始列，紧接着使用数值和斜线指定结束行和结束列：grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
• 使用自定义命名网格的名称来代替行或列起始和结束位置的数值：grid-area: <name> [<row-start> / <column-start> / <row-end> / <column-end>];
• 使用row-span或col-span指定跨越多少行或列：grid-area: <row-start> / <column-start> / span <row-span> / span <col-span>;

例如，以下代码展示了如何使用grid-area属性：

.item {
  grid-area: 1 / 2 / 3 / 4;
}

在这个例子中，我们定义了一个.item元素，使用grid-area属性指定了它所跨越的区域，从第1行和第2列开始，到第3行和第4列结束，它将占用第1、2、3行和第2、3、4列的所有单元格。

总的来说，使用grid-area属性方便地指定了网格项的开始和结束位置，并可以使网格项的位置和大小更加直观地描述。

4. 比较

4.1 Flex布局与Grid布局的异同

Flex布局和Grid布局是两种不同的CSS布局模式，它们各自采用不同的策略来对元素进行排列和定位。这里列出一些它们之间的异同点：

异同之处：

1. 相对定位和绝对定位

Flex布局是基于相对定位模型的，它的主要目的是对元素进行适应性布局，相对容器或其他元素进行定位，从而在可变屏幕尺寸和设备上改变它们的位置和大小。而Grid布局是基于绝对定位模型的，它的主要目的是在父级网格容器的单元格中对元素进行排列和定位。

2. 方向

Flex布局只能在主轴和交叉轴方向上排列元素，而Grid布局则可以在行和列上排列元素。

3. 属性

Flex布局具有的主要属性有flex-direction、justify-content、align-items和align-content等。这些属性用于控制Flex容器内Flex项在主轴和交叉轴方向上的位置、对齐方式和空间分布情况，其中flex-direction用于控制主轴方向。而Grid布局则拥有grid-template-rows、grid-template-columns、grid-template-areas等属性。这些属性用于定义网格容器的行和列，在行和列上排列和定位网格项。

4. 实现方式

Flex布局通过在Flex容器上应用display: flex属性来启用，并与Flex项目使用诸如flex-grow、flex-shrink和flex-basis等属性，来指定在空间分布方案。而Grid布局通过在父级元素上应用display: grid来启用，并与网格项使用类似于grid-column和grid-row这样的属性，以指定它们的位置和大小。

相同之处：

1. 容器和项目

Flex布局和Grid布局都基于容器和项目的概念，在容器中包含多个项目，并对这些项目进行计算和布局。

2. 响应式设计

Flex布局和Grid布局都是响应式布局，可以在不同的设备上和屏幕尺寸下自适应排列和定位元素。

总的来说，这两种布局模式都有其特定的用途和优点，可以根据不同的需求和场景进行选择和应用。Flex布局适用于需要快速实现适应性布局的小型项目，而Grid布局则更适用于大型网格布局项目。

4.2 如何选择Flex布局或Grid布局？

根据项目的需求和设计，选择适合的布局模式是非常重要的。

以下是一些考虑以及建议的情况，有助于决定使用Flex布局还是Grid布局：

1. 需要在单行或单列中排列和对齐元素时，可以使用Flex布局。例如，设计一个水平导航条、水平的图文列表以及一个垂直列布局等等。
2. 当需要在多行或多列中创建一个网格布局时，可以使用Grid布局。比如设计一个相册模块，产品展示模块等等。Grid 布局以其对齐和罗列功能的出众性能而闻名。
3. 如果布局需要同时支持网格和工具栏等外观，建议使用Flex布局。因为Flex布局更加灵活适应性强，在整个屏幕上都可以进行排列和对齐。
4. 如果需要实现项目间比例关系的控制，建议使用Flex布局。因为Flex布局很容易实现元素的比例调整，而Grid布局则需要在行和列上进行指定。
5. 如果网格布局需要对项目进行复杂的定位操作，建议使用Grid布局。因为Grid布局提供了更多的定位、调整和动态响应机制。

总而言之，选择使用Flex布局还是Grid布局取决于你的项目和需求。它们都有自己的优点和局限性，理解这些优点和局限性并灵活应用它们，可以帮助你更好地设计适应性的Web界面。