[干货]10个CSS Flexbox弹性框布局模式示例

我们可以通过使用一个有点粗糙的CSS技巧来创建一个包含比例受限的项目的网格。在本例中，如果我们在设置元素时使用，则相对于该项的父项设置。我们可以通过将项的和设置为相同的值（并通过有效地设置该元素的值）来使用该效果创建一个正方形：

从理论上讲，使用flexbox弹性框布局模式来构建复杂的布局非常简单，10个使用CSS的flexbox布局示例列表，您可以复制和粘贴它们以开始使用自己的布局。我们将演示这些基本布局模式。

display: flex

每个示例都假设您的 HTML 包含一个带有类的元素，然后包含多个子级，这些子级都有一个类（子级的数量因示例而异）：

containeritem

全部拉伸，固定间距

最基本的弹性布局模式：让几个框拉伸并填充其父元素的整个宽度。您需要做的就是设置容器，并在子项上对值进行值：

display: flexflex-grow.container { display: flex;}.item { flex-grow: 1; height: 100px;}.item + .item { margin-left: 2%;}

我们使用选择器仅在项目之间添加间隙（本质上只是跳过列表中第一项的左边距）。

与任何其他元素相比，增加将增加元素允许拉伸到的空间量。如果我们在这里设置中间元素，我们基本上会将可用空间分成 6 个块（每个项目 1 个块加上中间项目的额外 1 块，1+1+2+1+1）。中间项获得两个块 （） 的空间，所有其他元素获得一个块 （）。

flex-growflex-grow2flex-grow: 2flex-grow: 1

拉伸中间，固定间距

一个常见的应用程序和 Web 模式是创建一个顶部栏，我们只想在其中拉伸中间元素，但保持最右边和最左边的元素固定。 如果我们只想让一个元素拉伸，我们可以在应该保持静态的元素上设置固定宽度（例如 ），并在应该拉伸的元素上设置：

100pxflex-grow: 1.container { display: flex;}.item { height: 100px; width: 100px; /* 默认固定宽度 */}.item-center { flex-grow: 1; /* 设置中间元素增长和拉伸 */}.item + .item { margin-left: 2%; }

即使这里的中间元素有一个定义的，也会让它拉伸以占用所有可用空间。

width100pxflex-grow

交替网格

创建一个具有一些变化的网格：在每行两个大小相等的项目之后，有一个项目占据了整行：

我们需要为此：

设置在容器上（或者全部呈现在一行上）

flex-wrap: wrapitems

设置在容器上，只在元素之间创建空间（而不是在父元素和项目的边缘之间）

justify-content: space-between

将每个项目设置为（或等于或小于 width49%50% 的类似内容）

将每三个项目设置为以使其填满整行。 使其填充整行。我们可以使用选择器定位列表中的每三项。

width100%nth-child()

.container { display: flex; flex-wrap: wrap; justify-content: space-between;}.item { width: 48%; height: 100px; margin-bottom: 2%;}.item:nth-child(3n) { width: 100%;}

如果你希望第一行是全宽的，而后面的两个项目共享一行，请注意你不能写，那将针对所有项目。 你必须通过选择每三个元素来定位第一个项目，然后后退两个项目：

.item:nth-child(1n) { width: 100% }.item:nth-child(3n-2) { width: 100% }

3x3 网格

我们可以通过设置所有子对象的首选宽度来创建 3x3 网格（在这里使用简写：）项目之间的边距是每行的剩余部分，即 （100%-32x3）/2=2%。我已经匹配了边距（）以实现所有元素之间的均匀间距：

flex-grow0flex-basisflexflex: 0 32%margin-bottom: 2%

.container { display: flex; flex-wrap: wrap; justify-content: space-between;}.item { flex: 0 32%; height: 100px; margin-bottom: 2%; /* (100-32*3)/2 */}

您可以更改以增加或减少每行上的项目数。每行放置 4 个项目，每行放置 5 个项目，依此类推。

flex-basisflex: 0 24%flex: 0 19%

3x3 网格，受限比例 （1：1）

padding%paddingpaddingwidth.containerwidthpadding-bottomheightpadding-bottom.container { display: flex; flex-wrap: wrap; justify-content: space-between; } .item { width: 32%; padding-bottom: 32%; /*与宽度相同，设置高度*/ margin-bottom: 2%; /* (100-32*3)/2 */ position: relative; }

由于我们已经创建了一个实际上仅由填充组成的元素，并且没有内容的位置，因此我们需要在此示例中设置并添加一个子元素，并使用该元素“重置”画布并添加内容。

position: relative.itemposition: absolute

3x3 网格，受限比例 （16：9）

要更改项目的比例，您需要做的就是更改比例。更改会影响每行上的项目数，以免影响网格结构，例如更改为创建 16：9（相当于 32：18）的矩形。

widthpadding-bottom.itemwidthpadding-bottom18%

.container { display: flex; flex-wrap: wrap; justify-content: space-between;}.item { width: 32%; padding-bottom: 18%; /*与宽度相同，设置高度*/ margin-bottom: 2%; /* (100-32*3)/2 */}

图表：竖线

如果要使用 flexbox 创建简单的图形可视化，则只需设置容器并为每个条形定义 a.将确保条形锚定到图形的底部。

align-itemsflex-endheightflex-end

.container { display: flex; height: 300px; justify-content: space-between; align-items: flex-end;}.item { width: 14%; }.item-1 { height: 40%; }.item-2 { height: 50%; }.item-3 { height: 60%; }.item-4 { height: 20%; }.item-5 { height: 30%; }

图表：水平条

使用与垂直条相同的技术，我们可以简单地添加值来创建一组水平条.可以有一个默认值，或者其中水平运行 （→） 和垂直运行 （↓）。您也可以分别使用 （←） 和 （↑） 来反转两者的方向。

flex-directioncontainercolumnflex-directionrowcolumnrowcolumnrow-reversecolumn-reverse

.container { display: flex; height: 300px; justify-content: space-between; flex-direction: column;}.item { height: 14%; }.item-1 { width: 40%; }.item-2 { width: 50%; }.item-3 { width: 60%; }.item-4 { width: 20%; }.item-5 { width: 30%; }

垂直堆叠（居中）

要创建一个垂直堆叠并使项目从上到下运行，我们需要做的就是将默认值更改为：

flex-directionrowcolumn

.container { display: flex; flex-direction: column; align-items: center;}.item { height: 40px; margin-bottom: 10px;}

瀑布流

你可能已经在互联网上看到过瀑布流布局，但它们很可能都是由类似的JavaScript库提供支持的。Flexbox 似乎是最终仅使用 CSS 创建此布局的绝佳选择。

使用 flexbox 创建瀑布流布局的主要挑战之一是，要使项目影响其上方和下方项目的位置，我们需要将容器更改为项目从上到下运行。这将创建一个看起来很棒的布局，类似于砌墙效果，但可能会让用户感到困惑，它创建了一个意想不到的元素排序。如果您从左到右阅读，元素似乎被打乱并以看似随机的顺序出现，例如 1、3、6、2、4、7、8 等。

flex-directioncolumn

幸运的是，我们可以使用属性来更改元素的渲染顺序。我们可以将该属性与选择器的一些巧妙使用相结合，根据项目的原始顺序动态排序。如果我们想创建一个包含三列的瀑布流布局，我们可以将所有项目分为三个“组”，如下所示：

ordernth-child()

/* 将项目重新排序成行 */.item:nth-child(3n+1) { order: 1; }.item:nth-child(3n+2) { order: 2; }.item:nth-child(3n) { order: 3; }/* 强制新列 */.container::before,.container::after { content: ""; flex-basis: 100%; width: 0; order: 2;}

第一个元素、第四个元素、第 7 个元素等设置。具有相同值的元素将根据源代码顺序或首先设置的值按升序排序，因此在此示例中，我们生成了三个排序如下的集合：（3n+1） with、（3n+2） with 和 （3n） with。这三个组代表我们的三列。把顺序放在一起成为。

order1order1, 4, 7, 10order: 12, 5, 8order: 23, 6, 9order: 31, 4, 7, 10, 2, 5, 8, 3, 6, 9

如果我们确保将这些组中的每一个呈现为一列（不多也不少），则当您从左到右阅读时，会产生项目已恢复其原始顺序的错觉。如果我们在视觉上将网格解析为行，则第一行将包含每个组中的第一个元素（），第二行将包含每个组（）中的第二个元素，依此类推。然后，我们在占据父级高度 100% 的列之间插入元素，这会迫使列换行，而不会意外地与相邻列合并。以下是完整的 CSS 代码段：

1, 2, 34, 5, 6

.container { display: flex; flex-flow: column wrap; align-content: space-between; height: 580px; } .item { width: 32%; margin-bottom: 2%; /* (100-32*3)/2 */ } /* 将项目重新排序成行 */ .item:nth-child(3n+1) { order: 1; } .item:nth-child(3n+2) { order: 2; } .item:nth-child(3n) { order: 3; } /* 强制新列 */ .container::before, .container::after { content: ""; flex-basis: 100%; width: 0; order: 2; }

从视觉上看，这实现了非常接近瀑布流效果。