掌握 CSS Flexbox 布局，轻松实现互联网常用布局-JavaScript中文网-JavaScript教程资源分享门户

CSS Flexbox 是一种用于可伸缩布局的新技术。采用 Flexbox 布局，可以使容器内的元素具备了更灵活的适应性，并且可以轻松实现互联网常用布局。在设计 Web 页面的过程中，掌握 CSS Flexbox 布局是必不可少的。

什么是 CSS Flexbox 布局

CSS Flexbox 是指弹性盒子布局。该布局基于一个 Flex 容器和其中的一些 Flex 项。容器采用 Flex 布局后，它的子元素 Flex 项的排列方向、间距、尺寸都可以通过容器的属性来控制。这种布局方式更为灵活和强大，可以适应不同的屏幕尺寸和设备。此外，它还支持包裹，对齐和排序等功能。

Flex 容器和 Flex 项

Flexbox 布局中有两个重要的概念：Flex 容器和 Flex 项。

Flex 容器是指匆勉容器，在 CSS 中，通过将 display 属性设置为 flex 或 inline-flex 来创建 Flex 容器。Flex 容器中包含了一个或多个 Flex 项。

Flex 项是指 Flex 容器中的子元素。每个 Flex 项设置了不同的属性，可以控制它在 Flex 容器中的排列方式。

基本概念

在深入介绍 CSS Flexbox 布局之前，需要了解以下一些基本的概念：

主轴：Flex 容器的主轴是指 Flex 项排列的方向，可以是水平方向（row）或垂直方向（column）
交叉轴：与主轴垂直的方向就是交叉轴
Flex 项的尺寸：Flex 项可以设置 width、height、padding、margin、border 等尺寸属性
Flex 项的排列方式：Flex 项在主轴和交叉轴上的排列方式可以通过容器的属性来控制

容器属性

Flex 容器的属性用于控制其中 Flex 项的排列方式。

display

Flexbox 布局的第一步是将容器设置为 Flex 容器。通过将 display 属性设置为 flex 或 inline-flex 来定义 Flex 容器。

.container {
  display: flex;
}

flex-direction

flex-direction 属性用于控制 Flex 项在主轴上的排列方式，可以是 row（默认）、row-reverse、column 或 column-reverse。这个属性决定了 Flex 项的排列方向。

.container {
  display: flex;
  flex-direction: row-reverse;
}

flex-wrap

默认情况下，Flex 项都在一行中排列。flex-wrap 属性用于设置 Flex 项是否换行。可以设置为 nowrap（默认，不换行）或 wrap（换行）。

.container {
  display: flex;
  flex-wrap: wrap;
}

justify-content

justify-content 属性用于控制 Flex 项在主轴上的对齐方式。可以设置为 flex-start（默认，左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐）、space-around（元素之间有更多的空白）或 space-evenly（元素之间分配相同数量的额外空白）。

.container {
  display: flex;
  justify-content: center;
}

align-items

align-items 属性用于控制 Flex 项在交叉轴上的对齐方式。可以设置为 flex-start（交叉轴起点对齐）、flex-end（交叉轴终点对齐）、center（居中对齐）、baseline（基线对齐）或 stretch（默认，占满整个容器高度）。

.container {
  display: flex;
  align-items: center;
}

align-content

align-content 属性用于控制多行 Flex 项在交叉轴上的对齐方式。如果 Flex 容器只有一行，则该属性无效。可以设置为 flex-start、flex-end、center、space-between、space-around 或 stretch。

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

项目属性

Flex 项的属性用于控制元素在 Flex 容器中的排列方式。

flex-basis

flex-basis 属性用于设置 Flex 项在主轴上的尺寸，默认值为 auto。可以设置为像素、百分比、em 或自动。

.item {
  flex-basis: 200px;
}

flex-grow

flex-grow 属性指定是否让 Flex 项在主轴方向上和相邻项一样扩展。如果所有项都设置了 flex-grow，则它们将等分剩余的空间。

.item {
  flex-grow: 1;
}

flex-shrink

flex-shrink 属性指定是否让 Flex 项在主轴方向上和相邻项一样缩小。如果所有项都设置了 flex-shrink，则它们将等比缩小。

.item {
  flex-shrink: 1;
}

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写。默认值为 0 1 auto。

.item {
  flex: 1;
}

align-self

align-self 属性指定 Flex 项在交叉轴上的对齐方式。可以与 align-items 不同。

.item {
  align-self: center;
}

实例

下面是一个基于 CSS Flexbox 布局的实例：

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

以上是一个简单的 Flex 容器，其中的 Flex 项都设置了相同的 flex 属性。因此，它们平均分配 Flex 容器的宽度空间。这个例子中，Flex 容器在水平和垂直方向都居中对齐。

总结

CSS Flexbox 布局是一种强大和灵活的布局方式，可以轻松实现互联网常用布局。通过掌握 Flex 容器和 Flex 项的属性，我们可以向 Web 页面添加更多有用的功能并使其更有适应性。掌握 CSS Flexbox 布局需要多次实践，希望本文能够作为你学习 Flexbox 布局的良好资料。

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