龙空技术网

「干货」CSS Flexbox弹性框布局模式示例

NightBurial 913

前言:

目前小伙伴们对“css制作框”可能比较讲究,朋友们都想要学习一些“css制作框”的相关知识。那么小编也在网上搜集了一些有关“css制作框””的相关知识,希望姐妹们能喜欢,你们一起来学习一下吧!

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

display: flex

每个示例都假设您的 HTML 包含一个带有类的元素,然后包含多个子级,这些子级都有一个类(子级的数量因示例而异):containeritem

<div class="container">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  ...</div>

全部拉伸,固定间距

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

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)

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

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.item --tt-darkmode-color: #A3A3A3;">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;    }

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

标签: #css制作框 #css弹性滚动 #html中如何产生带有正方形项目的列表