css grid 布局的那些事儿

SS Grid 是一种为 Web 开发创建网站布局的方式。它已经存在了很多年，随着更多浏览器的支持，它终于变得越来越流行。

接下来我们将了解下 CSS Grid 及其工作原理。了解下它如何使用。

CSS 网格简介

随着布局系统的不断发展，CSS 也取得了长足的进步。随着 CSS Grid 的发布，我们终于有了一个强大的工具来创建二维布局。如今，设计师和开发人员正在使用各种布局系统，如 Flexbox 甚至纯 CSS 来创建令人惊叹的响应式网站。但是当涉及到某些任务时，这些方法中的每一种都有其自身的局限性。在这种情况下，CSS Grid 可以派上用场！

CSS 网格架构

有两种使用 CSS 网格布局的方法：隐式和显式。使用隐式网格，您只需定义所需的列数，浏览器将自动创建网格。使用显式网格，您可以定义列数和行数。这使您可以更好地控制布局，但设置起来可能更复杂。

它是一个二维布局系统。这意味着它可以处理列和行。然而，与主要是一维的传统 CSS 布局不同，CSS Grid 旨在同时处理两个维度。

它是一个基于容器的布局系统。这意味着它适用于作为容器元素的子元素的元素。容器元素定义网格，子元素放置在网格单元格中。

它是一个响应式布局系统。这意味着它可以适应不同的屏幕尺寸和分辨率。CSS Grid 也很灵活，这意味着它可以用于从简单到复杂的各种布局。

它是在现有的 CSS 盒子模型之上构建的。这意味着它可以与任何现有的 CSS 代码库一起使用。但是，它还具有一些使其独一无二的新功能。

CSS Grid 独一无二的功能

提供使用基于行的定位将项目放置在网格上的能力。这使得创建非常复杂的布局成为可能，而无需使用传统的浮动或绝对定位。
提供跨越列和行的能力。换句话说，您可以拥有跨越多列或多行的项目。
提供通过使用行号和名称或通过定位网格的特定区域将项目放置在特定位置的能力。还包括一个算法来控制未明确放置在网格上的项目的放置。
提供控制项目放置在网格区域内后如何对齐以及网格整体对齐方式的能力。
提供使用像素创建使用固定轨道大小的网格的能力 - 将网格设置为适合您所需布局的指定像素。您还可以使用百分比或 fr 单位来指定灵活的轨道大小。

所有这些功能在正确使用时都可以创建在任何屏幕尺寸上都能很好显示的响应式布局。

使用 CSS 网格的好处

在构建网页时使用 CSS Grid 有很多好处。主要好处之一是它可以更轻松地创建复杂的布局。使用 CSS Grid，您可以创建具有多列和多行的布局，并且可以轻松控制页面上每个元素的大小和位置。

CSS Grid 的另一个好处是它有助于保持代码整洁有序。使用传统的 CSS，您的代码很容易变得混乱且难以阅读。但是，使用 CSS Grid，您的所有样式都应用于网格，这使您的代码更易于阅读和理解。

创建网格布局

您需要首先定义一个容器元素并为其分配一个类名。此元素将包含您的所有内容。在容器内部，您将定义一系列子元素，每个子元素将占据网格的特定区域。您可以使用各种属性来控制这些元素的大小和位置。之后，将以下 CSS 代码添加到您的样式表中：

.container {
    display: grid;
}

这将创建一个网格布局，其中一列包含所有子元素。

网格父属性

网格父元素是应用了 display: grid 属性的元素。它可以是任何类型的元素。

网格父元素的属性：

grid-template-columns：此属性定义列数和每列的宽度。
grid-template-rows：此属性定义行数和每行的高度。
grid-gap：此属性定义列和行之间的空间。

网格子属性

CSS Grid 中的子属性用于定义网格项的大小、位置和其他方面。这些是可以应用于网格元素的一些主要子属性：

grid-column:此属性用于指定网格中列的大小和位置。此属性的语法是“ grid-column: ”。
grid-row:该属性用于指定行在网格中的大小和位置。此属性的语法是“ grid-row: ”。
grid-area:该属性用于指定网格中某个区域的大小和位置。此属性的语法是“ grid-area: ”。

使用列和行

网格允许您指定布局中的列数和行数，然后将元素放置在这些列和行中。

grid-template-columns 您可以使用和 grid-template-rows 属性控制列和行的宽度。例如，您可以使用以下代码创建三列布局：

.container {
    display: grid;
    grid-template-columns: 100px 200px 300px;
}

您还可以使用百分比或分数来控制列宽。例如，以下代码将创建三列，第一列的宽度是第二列的两倍，第三列的宽度是第三列的三倍：

.container {
    display: grid;
    grid-template-columns: 50% 33.33% 25%;
}

在布局中指定列数和行数后，您可以使用 grid-column 和 grid-row 属性将元素放置在这些列和行中。例如，如果您有一个三列布局，您可以使用以下代码在第一列中放置一个元素：

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns, each 1/3 width of the container */
    grid-column: 1;
}

结论

如果你没有使用过 grid 布局，或者使用过，但是用的不多的话，那么我建议您可以多尝试下，因为当你用的多的时候，你就会发现，它是真的好用。

原创，翻译自An Interactive Guide to CSS Grid
建议结合阅读原文，原文示例可交互

介绍

CSS Grid 是 CSS 语言里最令人赞叹的部分之一，它为我们提供了许多新型工具，可以用这些工具来创建精致且流畅的布局。

它还出人意料地复杂。我花了相当长的时间才真正适应 CSS 网格！

本教程中，我将分享我在学习 CSS 网格布局时获得的最大启发时刻。你将学习这种布局模式的基础知识，并了解如何用它做一些很酷的事情。?

浏览器支持？
CSS Grid 是构建 CSS 布局最现代的工具，但它并不是 “前沿” 技术；它自 2017 年以来就受到所有主流浏览器的支持！
根据 caniuse 的数据，CSS Grid 拥有 97.8% 的用户支持率。支持程度非常高；Flexbox 的支持率也仅高出 0.5% 左右！

心智模型

CSS 由多种不同的布局算法组成，每种算法都针对不同类型的用户界面而设计。默认布局算法流式布局（Flow layout）适用于数字文档。表格布局（Table layout）适用于表格数据。弹性盒布（Flexbox）局用于沿单个轴分布项目。

CSS 网格（Grid）是最新且最佳的布局算法。它非常强大：我们可以用它基于一些条件构建灵活调整的复杂布局。

在我看来，CSS Grid 最不寻常的部分是它仅使用 CSS 定义了网格结构（即行和列）:

使用用 CSS Grid，可以将一个 DOM 节点细分为行与列。在本教程中，我们使用虚线高亮显示行/列，但实际上它们都是不可见的。

这真是太奇怪了！在其他所有布局模式中，创建这样的分隔区域唯一的方法就是增加更多的 DOM 节点。例如，在表格布局中，每一行都是用一个 <tr> 来创建的，而该行内的每个单元格则使用 <td> 或 <th> 来实现：

<table>
  <tbody>
    <!-- First row -->
    <tr>
      <!-- Cells in the first row -->
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <!-- Second row -->
    <tr>
      <!-- Cells in the second row -->
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

不同于表格布局，CSS 网格允许我们完全在 CSS 内部管理布局。我们可以按照自己的意愿切割容器，创建出网格子元素可以作为锚点使用的分隔区域。

Grid 布局

我们通过 display 属性选择进入网格布局模式：

.wrapper {
  display: grid;
}

默认情况下，CSS 网格使用单列，并将根据子项的数量根据需要创建行。这被称为隐式网格，因为我们没有明确定义任何结构。

工作原理如下：

隐式表格是动态的，会根据子元素的数量添加或移除行。每个子元素都有它自己的行。

默认情况下，网格容器的高度由其子元素决定。它会动态地增长和缩小。有趣的是，这甚至不是“CSS 网格”的特性；网格容器仍然使用流式布局，而流式布局中的块级元素会垂直增长以包含它们的内容。只有子元素是使用网格布局来排列的。

但如果我们给网格设定一个固定的高度呢？在那种情况下，总面积会被划分成等大小的行：

Grid 排列

默认情况下，CSS 网格会创建一个单列布局。我们可以使用 grid-template-columns 属性来指定列：

向 grid-template-columns 传入两个值 — 25% 和 75% — 我告诉 CSS 网格算法将元素切分成两列。

列可以用任何合法的 CSS 值来定义，包括像素、rem、视口单位等等。此外，我们还可以使用一个新的单位，也就是fr单位：

“fr”表示“fraction”。在这个示例中，我们说第一列应占据 1 个单位的空间，而第二列占据 3 个单位的空间。这意味着共有 4 个单位的空间，这将成为分母。第一列消耗了可用空间的 ?，而第二列消耗了 ?。

fr 单位为 CSS 网格带来了 Flexbox 风格的灵活性。百分比和 <length> 值创建固定约束，而 fr 列可以根据需要自由增长和缩小，以包含它们的内容。

请尝试增减该容器，以查看差别：

在这种场景下，我们的第一列有一个毛茸茸的小幽灵，显示的宽度明确为 55 像素。但如果列太小无法包含它该怎么办？

基于百分比的列是固定的，因此我们的虚像会“溢出”，溢出到列之外。
基于fr的列是灵活的，即使这意味着破坏了比例，列也不会缩小到其最小内容大小以下。

更确切地说，fr 分配的是多余空间。首先，列宽将根据其内容进行计算。如果有任何剩余空间，它将根据 fr 值进行分配。这与 flex-grow 非常相似，如我在 Flexbox 交互式指南中所述。

总体而言，这种灵活性是一件好事。百分比太死板了。

我们可以通过 gap 看到这个原理的一个非常好的例子。gap 是一个神奇的 CSS 属性，它可以在网格中的所有列和行之间添加固定数量的间距。

看看当我们在百分比和小数间切换时会发生什么：

当使用百分比时，注意内容是如何溢出网格父元素的吗？这是因为百分比是使用网格的总面积计算的。两个列占用了父元素内容区域的 100%，并且不允许它们缩小。当我们添加 16px 的间距时，这些列别无选择，只能溢出容器。

相反，fr 单位是根据额外的空间来计算的。在这种情况下，额外的空间因 gap 而减少了 16 像素。CSS 网格算法会在两个网格列之间分配剩余的空间。

隐式和显式行

如果我们向一个两列的网格中添加超过两个子元素会发生什么？

好吧，我们来尝试一下：

有趣！我们的网格产生了新的行。grid算法想要确保每个子项都有它自己的网格单元格。它会根据需要生成新行，以实现这一目标。在项目数量变化的情况下(例如照片网格)，且希望网格自动扩展时，这非常方便。

在其他情况下，我们想要显式的定义行，创建特定的布局。我们可以使用 grid-template-rows 属性来完成此操作：

通过定义 grid-template-rows 和 grid-template-columns，我们创建了一个明确的网格。这是构建页面布局的完美选择，例如本教程顶部的“圣杯”布局。

repeat方法

想象一下我们要创建一个日历：

CSS 网格是用于这种类型事情的非常棒的工具。我们可以将其构建为 7 列网格，每列占用 1 个单位的空间：

这种方法可行，但不得不数每个 1fr 项有点烦人。想象一下，如果我们有 50 列！

幸运的是，有一个更优雅的解决方案：

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

repeat 函数将为我们完成复制/粘贴。我们说我们需要 7 列，每一列的宽度都是 1fr。

子元素排列

默认情况下，CSS 网格算法会将每个子元素分配到第一个未占用的网格单元格，很像一个熟练工人在地板上铺瓷砖一样。

不过最棒的是：我们可以把项目分配到我们想要的任何单元格里！孩子们甚至可以在多行/多列中展开。

这是一个展示此工作原理的交互式演示。点击/按住并拖动以将孩子放在网格中:

.parent {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  grid-template-rows:
    repeat(4, 1fr);
}
.child {
  grid-row: 2;
  grid-column: 2;
}

grid-row 和 grid-column 属性允许我们指定网格子元素应占据哪个轨道。

如果我们希望孩子占用单独一行或列，我们可以通过其编号来指定它。grid-column: 3 会将孩子设置在第三列中。

网格子组件也可以跨多行/列拉伸。其语法是使用斜杠来定义开始和结束：

.child {
  grid-column: 1 / 4;
}

乍一看，这看起来像一个分数 ?。然而，在 CSS 中，斜杠字符不用于除法，它用于分隔值组。在这种情况下，它允许我们在一个声明中设置开始和结束列。

这是一种简写，它相当于：

.child {
  grid-column-start: 1;
  grid-column-end: 4;
}

这里有一个狡猾的陷阱：我们提供的值是基于列的“线”而不是列的“索引”。

从一张图中，最容易理解这个陷阱：

.child {
  grid-row: 2 / 4;
  grid-column: 1 / 4;
}

虽然令人费解，但一个 4 列的网格实际上有 5 条列线。当我们将一个子元素分配到网格时，我们使用这些线来锚定它们。如果我们想要子元素跨越前 3 列，它需要从第 1 条线开始，并在第 4 条线上结束。

Grid areas

好的，现在要谈谈 CSS Grid 最酷的部分之一。

假设我们要建立此布局：

根据我们目前已经学到的东西，我们可以构建如下这种结构：

.grid {
  display: grid;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 50px 1fr;
}
.sidebar {
  grid-column: 1;
  grid-row: 1 / 3;
}
header {
  grid-column: 2;
  grid-row: 1;
}
main {
  grid-column: 2;
  grid-row: 2;
}

这种方法可行，但有一种更符合人体工学的方法可以用：网格区域。

看看它长什么样：

.parent {
  display: grid;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 50px 1fr;
  grid-template-areas:
    'sidebar header'
    'sidebar main';
}
.child {
  grid-area: sidebar;
}

一如既往，我们使用 grid-template-columns 和 grid-template-rows 定义网格结构。然后，我们有了这个奇怪的声明：

.parent {
  grid-template-areas:
    'sidebar header'
    'sidebar main';
}

这原理如下：我们正在画我们想要创建的表格，有点像我们制作 ASCII 艺术一样。每一行表示一行，每个单词都是我们给表格特定部分起的名字。明白它为何从视觉上看起来像表格了吗？

于是，我们不再为子元素分配 grid-column 和 grid-row，而是为其分配 grid-area！

当我们希望某个区域跨越多行或多列时，可以在模板中重复此区域的名称。在此示例中，“sidebar”区域跨越两行，因此我们为第一列中的两个单元格都编写了“sidebar”。

应该使用区块还是行/列呢？在构建像这样明确的布局时，我非常喜欢使用区块。这可以让我为我的网格分配赋予语义含义，而不是使用难以理解的行/列编号。话虽如此，只有当网格有固定数量的行和列时，区块才能发挥最佳作用。grid-column 和 grid-row 可以用于隐式网格。

键盘问题

网格分配存在一个很大的问题：标签顺序仍将基于 DOM 位置，而非网格位置。

我们用一个例子来说明一下，在这个 playground 中，我准备了一组按钮，并用 CSS Grid 进行布局。

<div class="wrapper">
  <button class="btn one">
    One
  </button>
  <button class="btn four">
    Four
  </button>
  <button class="btn six">
    Six
  </button>
  <button class="btn two">
    Two
  </button>
  <button class="btn five">
    Five
  </button>
  <button class="btn three">
    Three
  </button>
</div>

按钮似乎有顺序。从左向右、从上到下阅读，我们从一到六。

如果你有带键盘的设备，请尝试通过这些按钮来切换。您可以先点击左上角的第一个按钮（“一”），然后连续按 Tab 键，逐个切换按钮。

您应该看到类似这样的内容：

用户看来，焦点轮廓没有任何道理地跳跃到页面的各个部分。发生这种情况是因为按钮的焦点基于它们在 DOM 中的顺序。

为了修复这个问题，我们应该在 DOM 中重新排列网格的子元素，以便它们与可视顺序匹配，这样我就可以从左到右，从上至下进行制表键切换。

对齐

在迄今为止的所有示例中，我们的列和行都延伸来填充整个网格容器。但这种情况并非一定要发生！

例如，我们定义了两个 90px 宽的列。只要网格父级大于 180px，那么就会在末端产生一些空白：

通过 justify-content 属性，我们可以控制列分布：

如果您熟悉 Flexbox 布局算法，那么这听起来可能很熟悉。CSS Grid 基于 Flexbox 首次引入的对齐属性，并将这些属性发挥到了极致。

最大的区别是，我们要调整的是列，而不是元素本身。实质上，justify-content 让我们可以整理网格的隔间，以我们希望的方式在网格中分布。

如果我们想在列内对齐项目本身，我们可以使用 justify-items 属性：

当我们将一个 DOM 节点放入网格父元素中时，默认行为是使其跨越该列的整个宽度，就像流布局中的 <div> 会水平拉伸以填充其容器一样。但是使用 justify-items 可以调整这种行为。

这很有用，因为它允许我们摆脱列的刚性对称。当我们把 justify-items 设置为 stretch 以外的其他值时，子项将缩小至由其内容确定的默认宽度。结果，同一列中的项目可以具有不同的宽度。

我们可以使用 justify-self 属性来控制一个特定的网格子项的对齐方式：

与用于设置网格父级并控制所有网格子元素对齐方式的 justify-items 不同，justify-self 是在子元素上设置的。我们可以将 justify-items 看作在所有网格子元素上设置 justify-self 的默认值的方式。

对齐行

迄今为止，我们一直在谈论如何在水平方向上对齐内容。CSS 网格布局提供了一组额外的属性，用以在垂直方向上对齐内容：

align-content与justify-content类似，但它影响的是行而不是列。类似地，align-items与justify-items类似，但它处理的是网格区域内项目_垂直_对齐方式，而不是水平对齐方式。

更进一步分解为：

justify——处理列。
align — 处理行。
content — 处理 网格结构。
item ——处理网格结构中的 DOM节点。

最后，除了justify-self，我们还有align-self。该属性控制单元格内单个网格项的垂直位置。

水平垂直居中

还有一件事我必须给你演示一下。这是我喜欢的小技巧之一，用 CSS Grid 实现的。

使用仅有的两个 CSS 属性，我们可以让子元素在容器中居中，无论水平还是垂直方向：

.parent {
  display: grid;
  place-content: center;
}

place-content 是一个简写形式属性。它等同于以下代码：

.parent {
  justify-content: center;
  align-content: center;
}

正如我们已经了解的，justify-content 控制了列的位置。align-content 控制了行的位置。在这种情况下，我们有一个具有一个子项的隐式网格，因此我们最终得到一个 1×1 网格。place-content: center 将行和列都推到中心位置。

在现代 CSS 中有多种方法可以使 div 居中，但是这是我知道的唯一一种只需要两个 CSS 声明的方法！

最后更新

2023年11月22日

. 流式定位

这是网页元素默认的定位方式，网页元素按照其HTML标签的先后顺序，在网页内依次显示，就像液体一样“流动”，所以称为“流式定位”，这种方式将所有网页元素的默认显示方式分为以下几种类型：

块级元素（display: block）：可以设置宽度，默认宽度为100%，但不管多宽都会独占一行，多个块级元素按从上到下的顺序纵向显示，默认显示为块级元素的包括：段落(p)、层(div)、表单(form)等。

内联元素（display: inline）：不会独占一行，可以多个元素共享一行，按从左至右的顺序横向显示，默认显示为内联元素的包括：文本标签(label)、链接(a)等。

行内块元素（display: inline-block）：这种定位方式兼具块级元素和内联元素的优势，既可以像块级元素一样设置宽度和高度，又可以一行放置多个，默认显示为内联元素的包括：图片(img)、输入项(input)、多行文本(textarea)等。

可以通过设置HTML元素的CSS样式的display属性来改变元素默认的流式定位方式，例如将层(div)元素设置为行内块元素后，就可以跟文本标签(label)、图片(img)等元素放在同一行显示，不再独占一行。

流式定位存在一些问题，主要包括：

l 块级元素很难被有效利用起来，因为其独占一行的特性，不能一行显示多个。

l 内联元素无法设置宽度、高度和垂直方向边距，不好精确控制元素大小和显示位置。

l 内联元素之间水平方向会因为代码中的空格、换行等产生间隙，垂直方向存在默认的底部间隙，这给水平布局带来额外的麻烦。

2. 浮动定位

浮动定位会让元素脱离原来的标准文档流浮动起来，直至它的外边缘遇到父元素的内边缘或者另一个兄弟浮动元素的外边缘。

任何HTML元素都可以设置为浮动，可以通过设置HTML元素的CSS样式的float属性来设置具体的浮动方式，可以选择向左浮动（float: left）或向右浮动（float: right）。

相对于网页默认的流式定位，浮动定位有以下优势：

l 多个块级元素可以共享一行。

l 内联元素可以设置宽度和高度。

l 元素之间的空格、换行不影响元素的显示位置。

浮动定位最初被设计出来是为了实现文字环绕图片显示的效果，但由于其上述优势，后来大家也用浮动定位来设置更多网页元素的位置，代替默认的流式定位，也是TaskBuilder默认的组件定位方式。

不过，浮动定位也有一些问题，不是所有的场合都适合，大家根据需要选择，这些问题包括：

l 居中对齐问题：浮动定位不太好实现垂直和水平居中对齐。

l 父元素的高度塌陷问题：如果元素不浮动，会自动撑开父元素的高度，浮动后，由于浮动元素已经脱离原来的标准流，如果父元素没有设置高度，且父元素中没有其他非浮动元素时，会造成父元素的高度塌陷（高度变成了0）。

3. 坐标定位

坐标定位是指为HTML元素设置上下左右的偏移量来确定其具体的显示位置或大小，通过设置元素CSS的position属性，可以选择坐标定位的具体方式，包括：

相对定位（position: relative）：即相对于元素在流式定位时的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个CSS属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。

相对定位示意图

绝对定位（position: absolute）：即相对于第一个非静态定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。元素使用绝对定位后，其他标准流元素会填补它的位置。绝对定位可以通过设置元素CSS样式的left和top属性来精确控制元素的显示位置，再设置right或bottom这两个CSS样式，实现元素的宽度或高度根据父元素的宽度和高度动态设置和变化。

绝对定位示意图

固定定位（position: fixed）：即相对于浏览器的窗口进行定位，可以使用 top、right、bottom、left 这 4 个CSS属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口，元素的位置都是固定不变的。

粘性定位（position: sticky）：它是相对定位和固定定位的结合体，能够实现类似吸附的效果，当滚动页面时它的效果与相对定位相同，当元素要滚动到屏幕之外时则会自动变成固定定位的效果。用粘性定位很容易实现元素置顶显示的效果。

4. 表格定位

顾名思义，表格定位就是用表格来实现网页内容的定位，先绘制一个多行多列的表格，并设定表格各列的宽度和各行的高度，然后在表格的单元格里插入相关网页元素，最终实现这些元素的位置定位。

这种定位方式比较适合可以将页面内容清晰明确地划分为多行多列的场景，例如各种业务单据和数据报表等。

有两种方式可以实现表格布局： HTML Table（<table>标签）和CSS Table（display:table 等相关属性）。HTML Table是早期网页设计采用的表格定位方式，由于其渲染性能较低，且有些界面效果较难实现，用的人已经比较少了，现在推荐使用CSS Table，能实现一些HTML Table做不到的效果。

目前，TaskBuilder只是在报表设计器里集成了一个第三方的表格插件，在前端tfp页面设计器里，还没有提供表格定位相应的容器组件，未来会提供。（现有的可编辑表格和数据表格不是用来为其他组件提供定位的，所以不能算作是表格定位的容器组件）

5. 弹性定位

弹性定位又叫弹性布局，这种定位方式最大的特点就是可以让子元素的大小可以根据父元素的大小自动扩张或收缩，从而可以做到自动适应不同终端的屏幕尺寸，或者在用户改变浏览器窗口大小时自动伸缩。

这种定位方式需要先将一个父元素的CSS属性display设置为flex，然后该元素里的子元素即可实现弹性定位。

采用弹性定位的容器元素可以设置以下CSS样式：

元素排列方向（flex-direction）：用来设置子元素的排列方向，有四种方式可以选择：从左到右显示（row）、从右到左显示（row-reverse）、从上到下显示（column）、从下到上显示（column-reverse）。

元素水平对齐方式（justify-content）：用来设置子元素在水平方向的对齐方式，可以选左对齐（flex-start）、右对齐（flex-end）、居中对齐（center）、两端对齐（space-between）和等距对齐（space-around）。

元素垂直对齐方式（align-items）：用来设置子元素在垂直方向的对齐方式，可以选顶部对齐（flex-start）、底部对齐（flex-end）、居中对齐（center）、基线对齐（baseline）、自动伸展（stretch）。

内容整体对齐方式（align-content）：当有多行子元素时，可以用该属性设置全部子元素整体的垂直对齐方式，包括自动拉伸（stretch）、在容器的顶部排列（flex-start）、在容器的底部排列（flex-end）、在容器内居中排列（center）、均匀分布，上下靠边（space-between）、均匀分布，每行等距（space-around）。

元素是否自动换行（flex-wrap）：用来设置子元素是否自动换行。

弹性定位容器内的子元素可以设置以下CSS样式：

扩展量（flex-grow）：必须参数，用来设置当前元素相对于其他元素的增长量，默认值为 0，即如果存在剩余空间，也不自动放大。

如果所有元素的扩展量都设置为1，将等分剩余空间。如果一个元素的扩展量设置为2，其他元素都为1，则前者占据的剩余空间将是其他项的2倍，如下图所示：

收缩量（flex-shrink）：必须参数，用来设置当弹性容器空间不足时，该元素相对于其他元素的收缩量，默认值为 1。如果所有元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个元素的flex-shrink属性为0，其他元素都为1，则空间不足时，前者不缩小。

基准长度（flex-basis）：必须参数，元素的基准长度定义了父容器在分配多余空间之前，当前元素占据的主轴空间（main size，如果是横向排列，则指父容器在水平方向的空间，如果是纵向排列，则指父容器在垂直方向的空间）。浏览器根据这个属性，计算主轴是否有多余空间。合法值为 auto（默认值，表示根据其他情况自动伸缩），或者以具体的值加 "%"、"px"等单位的形式，表示该元素将占据固定空间。

显示顺序（order）：属性用来设置元素在容器中出现的顺序，您可以通过具体的数值来定义元素在容器中的位置，默认值为 0。下图所示的四个普通的面板组件，在弹性面板里从左至右的正常插入顺序是panel1、panel2、panel3、panel4，但通过设置这四个面板的显示顺序，将panel1和panel4的显示位置进行了调换。

对齐方式（align-self）：该属性允许您为某个特定的元素设置不同于其它元素的对齐方式，该属性可以覆盖父容器组件（弹性面板）里的垂直对齐属性的值。该属性的可选顶部对齐（flex-start）、底部对齐（flex-end）、居中对齐（center）、基线对齐（baseline）、自动伸展（stretch）。

由于弹性定位的自动伸缩特性，且易于实现子元素的水平和垂直对齐，目前很多主流的前端UI框架都大量地采用了该定位方式。

在线咨询

上一篇：word图片异常，原来是因为这些
下一篇：CSS里的整洁架构

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商