别再纠结布局了！Flex 和 Grid 的 “神仙操作” 都在这

在前端开发的广袤天地中，CSS 布局如同建筑的基石，支撑着网页的结构与呈现。从早期的表格布局到 Float+Position 的统治时代，布局技术不断演进。直至 Flex 与 Grid 布局的横空出世，它们以卓越的灵活性和强大的功能，重塑了网页布局的格局，成为现代前端开发的中流砥柱。本文将深入探讨 Flex 与 Grid 布局，剖析其核心概念、关键属性及实际应用，助你掌握这两门布局绝技。

Flex 布局：一维空间的灵动舞者

Flex 布局，即 Flexible Box Layout，主要专注于一维布局，能够在单一的水平或垂直方向上对容器中的项目进行灵活的排列与布局。它的设计理念源于对内容动态变化的适应需求，当项目的数量或大小不确定时，Flex 布局能够自动调整项目的尺寸和位置，确保内容在容器中合理展示。

弹性容器与弹性项目

在 Flex 布局中，使用display: flex或display: inline-flex将一个元素设置为弹性容器。一旦容器被声明为弹性盒子，其直接子元素便自动成为弹性项目。例如：

css 复制代码

.container {
  display: flex;
}

html 复制代码

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

上述代码中，.container成为弹性容器，其中的三个.item则是弹性项目，它们会默认沿着主轴（水平方向）从左至右排列。

主轴与交叉轴

Flex 布局引入了主轴（main axis）和交叉轴（cross axis）的概念。默认情况下，主轴为水平方向，从左向右；交叉轴为垂直方向，从上往下。但通过flex-direction属性，我们可以轻松改变主轴的方向，进而改变项目的排列方向。

flex-direction: row：默认值，项目沿水平方向从左至右排列。
flex-direction: row-reverse：项目沿水平方向从右至左排列。
flex-direction: column：项目沿垂直方向从上至下排列。
flex-direction: column-reverse：项目沿垂直方向从下至上排列。

例如，将主轴方向改为垂直：

css 复制代码

.container {
  display: flex;
  flex-direction: column;
}

此时，三个.item项目将垂直排列。

主轴还有一个flex-warp属性，有nowrap,wwrap,wrap-reverse等值

项目对齐与空间分配

Flex 布局在主轴和交叉轴上提供了丰富的对齐方式和空间分配属性。

justify-content：用于设置项目在主轴上的对齐方式。
- flex-start：项目从主轴起点对齐（默认值）。
- flex-end：项目从主轴终点对齐。
- center：项目在主轴上居中对齐。
- space-around：项目在主轴上均匀分布，项目之间间隔相等，两侧也有间隔，且两侧间隔为项目间间隔的一半。
- space-between：项目在主轴上两端对齐，项目之间间隔相等，剩余空间平均分配在项目之间。
- space-evenly：项目在主轴上均匀分布，项目之间以及项目与容器两端的间隔都相等。

css 复制代码

/* 项目在主轴上居中对齐 */
.container {
  display: flex;
  justify-content: center;
}

align-items：用于设置项目在交叉轴上的对齐方式。
- flex-start：项目从交叉轴起点对齐。
- flex-end：项目从交叉轴终点对齐。
- center：项目在交叉轴上居中对齐。
- baseline：项目的基线对齐。
- stretch：如果项目未设置高度或设为auto，将拉伸以填满容器（默认值）。

css 复制代码

/* 项目在交叉轴上居中对齐 */
.container {
  display: flex;
  align-items: center;
}

此外，通过flex-grow、flex-shrink和flex-basis属性，我们可以精确控制项目在空间分配上的弹性。flex-grow定义项目的放大比例，数值越大，分配的多余空间越多；flex-shrink定义项目的缩小比例，数值越大，在空间不足时缩小的比例越大；flex-basis定义在分配多余空间前，项目占据的主轴空间，可以是长度值或百分比。flex属性则是这三个属性的简写形式，默认值为flex: 0 1 auto。

css 复制代码

/* 让第一个项目放大以填充剩余空间 */
.item:first-child {
  flex: 1;
}

Grid 布局：二维空间的精密指挥官

Grid 布局作为一种二维网格布局系统，为开发者提供了强大的工具，能够同时在水平和垂直方向上对项目进行布局，将网页空间视为一个二维画布，让我们可以自由地组合和排列元素，构建出复杂而精美的布局结构。

网格容器与网格项目

通过将元素的display属性设置为grid或inline-grid，可以将其定义为网格容器。容器内的直系子元素即为网格项目。

css 复制代码

.grid-container {
  display: grid;
}

html 复制代码

<div class="grid-container">
  <div class="grid-item">项目1</div>
  <div class="grid-item">项目2</div>
  <div class="grid-item">项目3</div>
</div>

在上述代码中，.grid-container成为网格容器，其中的.grid-item是网格项目。

定义网格结构

Grid 布局的核心在于通过grid-template-columns和grid-template-rows属性精确地定义网格的列宽和行高。我们可以使用多种方式来设置网格轨道的尺寸。

使用固定长度值：

css 复制代码

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 150px;
  grid-template-rows: 80px 120px;
}

上述代码定义了一个 3 列 2 行的网格，第一列宽 100px，第二列宽 200px，第三列宽 150px；第一行高 80px，第二行高 120px。

使用fr单位表示比例关系：fr（fraction 的缩写）意为 "片段"，用于表示剩余空间的分配比例。

css 复制代码

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

此代码表示将剩余空间平均分为 4 份，第一列占 1 份，第二列占 2 份，第三列占 1 份。

使用repeat()函数简化重复定义：

css 复制代码

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

这等同于grid-template-columns: 100px 100px 100px;，当需要创建多个相同宽度的列或行时，repeat()函数能大大简化代码。

使用auto-fill和auto-fit关键字实现自动填充：

css 复制代码

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

auto-fill表示自动填充，单元格宽度为minmax(200px, 1fr)，即最小宽度为 200px，最大宽度为剩余空间的 1 份。当容器宽度变化时，会自动调整列数以适应容器，且尽可能填满容器。auto-fit与auto-fill行为类似，但在容器足够宽时，auto-fit会尽量扩大单元格宽度，而不是创建空白列。

网格线与网格区域

网格线（Grid Line）是划分网格轨道的重要标识，从 1 开始编号，从左到右（列方向）或从上到下（行方向）依次递增。通过指定网格项目的起始和结束网格线，我们可以精准定位项目在网格中的位置。

css 复制代码

.grid-item {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

上述代码将网格项目从第 2 列开始，跨越到第 4 列；从第 1 行开始，跨越到第 3 行，占据了一个 2x2 的网格区域。

此外，我们还可以通过grid-template-areas属性为网格区域命名，从而更直观地布局项目。

css 复制代码

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

在这个例子中，我们定义了页眉、侧边栏、内容区和页脚四个网格区域，并通过grid-area属性将对应的元素放置在相应区域。

项目对齐与空间控制

Grid 布局提供了justify-items和align-items属性，用于控制网格项目在水平和垂直方向上的对齐方式。

justify-items：
- stretch：项目拉伸以填满单元格（默认值）。
- start：项目在单元格起始位置对齐。
- end：项目在单元格结束位置对齐。
- center：项目在单元格中居中对齐。

css 复制代码

.grid-container {
  display: grid;
  justify-items: center;
}

align-items：属性值与justify-items类似，用于控制项目在垂直方向的对齐。

同时，通过justify-content和align-content属性，我们可以控制整个网格内容在容器中的对齐方式，例如在容器中居中网格内容：

css 复制代码

.grid-container {
  display: grid;
  justify-content: center;
  align-content: center;
}

Flex 与 Grid布局双雄的比较与协作

Flex 布局和 Grid 布局虽然都是强大的 CSS 布局工具，但它们在设计理念、适用场景和布局特性上存在明显差异。

布局维度：Flex 布局主要是一维布局，专注于在单一方向（水平或垂直）上排列项目；而 Grid 布局是二维布局，能够同时在水平和垂直方向上精确控制项目的位置和大小。
设计理念：Flex 布局更倾向于内容驱动，注重项目之间的弹性关系，以适应内容的动态变化；Grid 布局则更强调结构先行，适用于布局结构已知且需要精确控制的场景。
对齐与空间分配：Flex 布局在主轴和交叉轴上提供了丰富的对齐方式，侧重于项目之间的相对位置和空间分配；Grid 布局不仅具备强大的对齐能力，还能通过精确的网格轨道定义，实现对网格空间的精细划分和分配，并且支持项目的跨行和跨列。

这里推荐两个网站：

cssgridgarden.com/ 通过给萝卜浇水，学习 CSS 网格布局

www.flexboxdefense.com/ CSS 塔防游戏，学习 flex 布局

可以通过两个小游戏帮助你快速掌握flex与grid布局~