1. 简介
1.1 什么是CSS布局？
CSS布局（Cascading Style Sheets layout）指的是通过使用CSS样式来控制网页中元素的布局方式。
在网页设计中，布局是非常重要的一个方面，因为它决定了网页中内容的呈现方式，对网页的可读性、可用性和美观性都有着重要的影响。
在CSS的发展过程中，出现了许多不同的布局方案，其中Flex布局和Grid布局是最常用的两种布局方式。
通过使用CSS布局，开发者可以通过少量的代码来快速而有效地实现自己所需要的布局效果。
1.2 为什么使用CSS布局？
使用CSS布局有许多好处，以下是其中的几个主要原因：
- 统一风格：使用CSS布局可以确保网页的各个部分在不同浏览器和设备上看起来一致，避免了由于不同设备或浏览器的不同特性导致的页面混乱的情况。
- 简化代码：使用CSS布局可以大大简化
HTML代码，通过统一的布局方式可以减少重复代码，提高了开发效率，减轻了开发工作的负担。 - 增强可读性：使用CSS布局可以使网页代码更加清晰和易于理解，开发者可以通过对样式的修改来达到想要的效果，而无需直接修改
HTML代码，使得代码的维护更加容易。 - 响应式设计：使用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元素，提高了页面布局的灵活性和可读性。
CSS布局模式之Flex布局&Grid布局（二）https://developer.aliyun.com/article/1426127
