Flexbox 和 Grid 布局 —— 让你的布局更高级-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发过程中，布局是最基础和重要的部分。为了让页面布局更灵活和适应不同终端设备的尺寸，CSS3 新增了很多布局方式。本篇文章将着重介绍 Flexbox 与 Grid 布局。

Flexbox 布局

什么是 Flexbox 布局

Flexbox（Flexible Box）是一种一维布局模型，即将一行或一列中的元素进行排列。它最初的目的是为了解决布局问题，使得在不同屏幕尺寸的设备上显示的页面都能够自适应。Flexbox 的主要思想是将容器分割为一个个弹性（flex）的行和列，通过设置弹性的属性和比例达到元素的控制。

如何使用 Flexbox 布局

通过以下代码段，我们可以在容器中配置 Flexbox 布局：

.container {
  display: flex;
}

接下来，每个容器内的子元素默认会排列在同一行上，且子元素之间的间距均等。如果希望它们垂直排列，可以设置如下代码：

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

Flexbox 的主要属性

Flexbox 布局有很多的属性值（mdn文档），下文会重点介绍几个核心属性。

flex-direction : 定义了容器内的元素是按横轴方向排列还是按纵轴方向排列。可以选的值有：row、row-reverse、column、column-reverse
justify-content ：用于控制子元素在 主轴方向（即flex-direction设置的方向） 上的对齐方式。可以选的值有：flex-start、flex-end、center、space-between、space-around、space-evenly
align-items ：用于控制子元素在 交叉轴方向（即flex-direction相反的方向） 上的对齐方式。可以选的值有：flex-start、flex-end、center、baseline、stretch
flex-grow : 设置子元素的放大比例。
flex-shrink ：设置子元素的缩小比例。
flex-basis ：定义了一个弹性盒子或弹性盒子组件的初始大小。

下面是一个 Flexbox 布局的示例代码：

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

-- -------------------- ---- -------
---------- -
    -------- -----
    ---------- -----
    ---------------- -------------
-

----- -
    ----------- -------------
    ------- ------
    ----------------- -----
    ----------- -----------
    -------------- -----
-

在以上代码中，.container作为一个容器，内部包含三个.item元素。首先通过display: flex设置容器为 Flexbox 布局，在此基础上，我们还设置了flex-wrap: wrap，以便让子元素换行。然后我们设置了justify-content: space-around，该属性值表示控制子元素在主轴方向上的对齐方式。最后我们单独为.item元素设置了其占据父容器的 1/3 空间，并设置了一些其他的 CSS 属性。

Grid 布局

什么是 Grid 布局

CSS Grid Layout 网格布局是一个二维布局模型，它在容器内创造一个网格布局（跟一个表格很类似），然后可以将子元素放置在任意的单元格中。Grid 布局可以轻松处理一些常见而又复杂的布局问题，同时还可以支持响应式设计，因而也是前端中不可或缺的布局方式。

如何使用 Grid 布局

通过以下代码段，我们可以在容器中配置 Grid 布局：

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

以上代码指定了我们想要创建有三列的 Grid 网格布局。

接下来，我们就可以在内部子元素定义哪些行应该被跨越，哪些列应该被跨越，还可以定义元素与其他元素之间的间隔。

Grid 的主要属性

grid-template-columns ：定义网格容器列的数量、大小和间隔。
grid-column-start ：指定一个单元格的水平起始位置。
grid-column-end ：指定一个单元格的水平结束位置。
grid-row-start ：指定一个单元格的垂直起始位置。
grid-row-end ：指定一个单元格的垂直结束位置。
grid-template-rows ：定义网格容器的行数、大小和间隔。
grid-template-areas ：定义网格模板中的命名区域。

以下是一个 Grid 布局的示例代码：

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

-- -------------------- ---- -------
---------- -
    -------- -----
    ---------------------- --------- -----
    -- ------------- --
    ------------------- --------- -----
    ---- -----
-

----- -
    ----------------- -----
    ----------- -----------
    ------- --- ----- --------
    ----------- -------
-

------ -
    ------------------ --
    ---------------- --
    --------------- --
    ------------- --
-

------ -
    ------------------ --
    --------------- --
-

首先我们设置了一个包含了 6 个元素的 .container 容器，通过display: grid 可以让容器启动网格布局。然后我们通过grid-template-columns 设置了三列，并通过repeat()函数声明了每个区域的大小以及边距。在元素定义中，我们使用grid-column-start ， grid-column-end，grid-row-start 和 grid-row-end 分别指定了不同元素在网格中的位置。最后我们为元素添加了一些其他的 CSS 属性。

总结

通过这篇文章的介绍，我们对 Flexbox 和 Grid 布局有了更深刻的认识，它们可以轻松解决常见的布局问题，也能够支持响应式设计。在实际开发过程的中我们可以根据场景灵活使用，可以通过其灵活的属性来控制元素的位置、大小和对齐方式等。

附注： 如果想要更深入了解 Grid 布局，建议阅读 w3school Grid布局教程。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/645713b9968c7c53b09ebfdb