让网站看起来很棒并且运行良好是一个巨大的挑战。在手机、平板电脑和笔记本电脑等不同设备上看起来不错的响应式布局极具挑战性。但开发人员总是在寻找更好的方法来创建适合任何展示设备的现代网页设计。这就是网格布局和 Flex 布局的用武之地。这两种特殊的布局改变了我们在网站上展示内容的方式。
Brick Builder 是 Web 开发人员使用的著名工具。它使用这些布局方法来帮助设计人员和开发人员更有效地创建网站。
本文将向您介绍Bricks Builder中的 Grid 布局和 Flex 布局。我们将了解它们如何工作，并使人们能够创建运行良好且看起来很棒的令人惊叹的网站。
了解网格布局
它用于网页设计和用户界面开发，以创建有组织且结构化的布局来显示内容。它提供了二维网格设计，允许设计人员和开发人员按列和行排列元素，例如文本、图像和其他媒体。
想象一下您正在为网站或应用程序创建设计。有时您必须显示许多不同的内容，例如图片、文本、按钮等。网格布局可帮助您将所有内容放置在页面上的正确位置，就像将项目放置在网格上一样。
这就像为您的页面制作一个整洁且有组织的蓝图。当处理一堆信息或你想展示的东西时，这非常有用，因为你可以控制每部分的去向。因此，如果您正在处理很多东西并希望它们能够很好地组合在一起，那么网格布局就像您的设计超级英雄！
如何在 Bricks 中创建网格布局？
通过将 CSS 属性选择显示为网格应用到任何布局元素（例如节、容器、块或 div），您可以将其转换为网格布局。这个指定的元素现在充当您的网格容器。
驻留在网格容器内的每个直接子元素都成为网格项。这些网格项拥有额外的属性，用于指定它们在网格中的位置，包括网格列和网格行的设置。
如何配置列和行网格（显式网格）？
网格布局：列配置
一旦我们的网格容器就位，下一步就是为网格的列和行定义特定的轨道。此任务是使用网格容器设置中的属性“grid-template-columns ”和“ grid-template-rows ”显式执行的。
让我们一起讨论几个说明性的例子grid-template-columns: 300px 2fr 1fr;
分配给“ grid-template-columns ”属性的每个值对应于不同列轨道的创建。
在提供的示例中，我们构建了三列的网格布局：
第 1 列设置为固定宽度300px。
第 2 列占据“ 2fr.”
第 3 列是“ 1fr。”
注意：“ fr”是小数单位，占据可用空间的一部分（x 部分）。
如何计算fr？
让我们考虑一个宽度为 1500px（其默认宽度）的网格容器。为了计算 fr，我们首先扣除非 fr 值和间隙。给定第 1 列的固定 300px 宽度，剩余可用宽度变为 1200px。
在本例中，我们总共有 3 个分数单元（第 2 列的 2fr 和第 3 列的 1fr）来分配到可用空间中。
因此，1fr 相当于 400 px（计算方式为 1200 px 除以 3）。因此，第 2 列的宽度为 800px (2fr x 400px)，第 3 列的宽度为 400px (1fr x 400px)。这种机制确保了网格内空间的适当分配。
网格布局：行配置
分配给“ grid-template-rows ”属性的每个值都对应于行轨道的创建。
例如，grid-template-rows: 200px 300px
在上面的示例中，最初的两行是显式定义的。第一行的高度为 200px，第二行的高度为 300px。
由于我们只设置了前两行的高度，因此第二行之外的任何行都会根据其包含的内容自动调整其高度。可以通过创建隐式网格来更改此默认行为。
什么是隐式网格？
当您的网格项不适合您定义的网格时，网格容器会自动为它们创建额外的列和行。这被称为“隐式网格”。“
您可以使用网格容器中的“ grid-auto-columns ”和“ grid-auto-rows ”设置来设置这些附加列和行的大小。
网格布局关键字：自动调整和自动填充
为了解决使网格在不使用特殊代码的情况下很好地适应不同屏幕的问题，我们有两个有用的词：“自动填充”和“自动适应”。我们没有具体说明要使用多少列，而是使用这样的单词：
想象一下，我们希望每列的宽度至少为 300 像素，但不超过屏幕宽度。
例如，repeat(auto-fill, minmax(200px, 1fr))。这意味着当屏幕较宽时，这些列将扩展并填充空间。但如果屏幕不够宽，这些列不会变得比屏幕大，并且它们将保持相同的大小。
这两个词之间的区别很简单：“自动调整”使列扩展以填充空间，而“自动填充”则保持空间不变，不让列变得比它更大。因此，根据您的需要，您可以选择正确的单词来使用！
网格布局：重复功能
CSSrepeat函数简化了您指定网格中轨道尺寸模式的方式。
它需要两个输入。第一个指示轨道大小应重复多少次，第二个定义每个轨道的大小。
例如，您正在创建一个清晰的 4 列网格。,grid-template-columns: repeat(4, 1fr)
同样，使用grid-template-rows: 200px repeat(2, 1fr) 300px，您可以设置一个清晰的 4 行网格。第一行高 200 像素，第二行和第三行各占用 1fr 的可用空间，第四行高 300 像素。
网格布局：最大和最小尺寸
CSSminmax函数提供了一种确定网格轨道的最小和最大尺寸的方法。该函数需要两个参数：第一个参数设置网格轨道的最小尺寸，第二个参数设置网格轨道的最大尺寸。
例如，考虑以下情况grid-template-columns: repeat(3, minmax(300px, 1fr));。
在此示例中，创建了一个固定的 3 列网格，其中每个网格项的最小宽度为 300 像素，最大宽度为 1fr。
然而，值得注意的是，这种固定网格可能会带来响应能力的挑战。例如，如果视口宽度降至 900 像素以下（可容纳至少 300 像素的 3 列），网格就会溢出。此外，列数在不同的屏幕尺寸上保持不变，如果不进行额外的调整，这对于各种断点来说可能并不理想。
网格项目的排列
想象一个像带有线条的地图的网格。这些线标记列和行的开始或结束位置。这些行的计数从 1 开始。
这些线不仅仅是为了展示——它们就像坐标一样，帮助我们将事物放置在网格上。如果我们想在某个位置放置一些东西，我们可以使用这些行号来指导我们。
在此示例中，我们创建了一个包含四列的网格容器，每列的大小均由grid-template columns定义。大小以像素为单位，但您也可以使用其他单位。
这使您可以使用定义的网格线作为坐标轻松地在网格上定位元素。您提到的数字（从 1 开始）分别对应于您在 grid-template-columns 或 grid-template-rows 属性中定义的列或行的索引。
网格布局的好处
精确对齐：网格布局使您能够实现网页上元素的像素完美对齐。当您需要创建元素需要水平和垂直完美对齐的复杂设计时，这特别有用。
响应式设计：Bricks 中的网格布局提供内置响应能力。您可以轻松地为各种屏幕尺寸设置不同的网格配置，确保您的设计在桌面和移动设备上保持视觉吸引力和功能性。
高效的间距： 网格布局可以轻松地在项目之间创建一致的间距，而无需依赖复杂的边距或填充调整。当您想要保持行和列之间的间距相等时，这是很有用的。
交互式设计： 如果您正在构建交互式元素，例如图像库或产品展示，网格布局提供了一个基础，可以以有吸引力的方式对齐和呈现这些元素。
了解 Flex 布局
它是网页设计中使用的一种智能且高效的方式，用于创建能够优雅地适应不同屏幕尺寸和设备的布局。与处理水平或垂直排列的传统布局方法不同，Flex 布局是一种一维布局系统，专注于沿单个轴分布和对齐元素。这种方法简化了容器内的空间分配和内容组织。
假设，您正在构建一个带有一排框的网页。每个框包含一些内容，例如文本或图像。无论屏幕尺寸如何，这些框都必须排成一行并均匀间隔。这就是 Flex 布局派上用场的地方。
Flex就像一个布局，可以帮助你整齐地排列这些盒子。当您想要创建在笔记本电脑、平板电脑和手机等不同设备上运行良好的布局而不会使代码变得过于复杂时，它尤其有用。
如何在 Bricks 中创建 Flex 布局？
Flex 是一种专注于沿一个方向排列项目的布局，例如行或列。它非常适合划分和安排容器内的空间。当您设计需要在不同设备和屏幕尺寸上显示良好的网页时，这会派上用场。它简化了制作适应性强的网页的过程，而无需大量复杂的 CSS 指令（例如浮动和位置）。
当您想要使用 Flex 布局时，首先通过在显示属性下选择Flex创建一个特殊容器。该容器内的所有内容都将成为 Flex 项目，Flexbox 会根据您的设计意图自动组织这些项目。它就像一个神奇的工具，可以帮助您构建灵活且响应灵敏的网页，而不会被困难的 CSS 技巧所困惑。
Flex 布局的属性
多个弯曲方向
Flexbox 引入了“ Flex Direction ”属性，它允许您定义 Flexbox 子项排列的主轴方向。默认情况下，此属性设置为“ row ”，使子级按照与浏览器的默认语言方向一致的顺序水平放置。
行（默认）：这会将元素从左到右放置（但如果应用 RTL，则进行切换）。
行反转：翻转行排列中的元素顺序。
列：元素从上到下组织。
列反转：列布局中元素的顺序相反。
Flex：内容包装
该属性的默认设置flex wrap是nowrap。这意味着如果容器内的弹性项目比容器本身宽，它们就会溢出。要在项目超出容器宽度时引发换行行为，您需要应用flex wrap值为 的属性wrap。随后，物品将包裹在容器内以容纳可用空间。
有以下三种选择：
Nowrap（默认）：确保 Flex 容器中的元素不会换行到下一行。
换行：必要时自动将项目换行为多行（或多列，基于弯曲方向）。
反向换行：与“换行”类似，但行（或列）在项目被换行时沿相反方向扩展。
Flex：证明内容合理
该属性控制子元素的水平对齐方式：
Flex-start（默认）：将元素向左对齐，类似于带有“ text-align: left ”的内联元素。
Flex-end：将元素右对齐，类似于带有“ text-align：right的内联元素”。“
Center：居中元素，很像带有“ text-align：center ”的内联元素。
周围空间：在每个元素周围均匀分配空间。需要注意的是，连续子元素之间的间距是最外面元素与容器边缘之间间距的两倍。
space- Between ：与 space-around 类似，但元素均匀分开，容器边缘附近没有空间。
均匀空间：沿主轴均匀分布元素，包括项目和容器边缘之间的空间。
Flex：对齐项目
此属性类似于“justify-content”，但它的影响是在容器内的行：
Flex-start：将元素垂直对齐到容器的顶部。
Flex-end：将元素垂直对齐到容器的底部。
中心：将元素在容器内垂直居中。
拉伸（默认）：使元素占据容器的整个高度（对于行）和宽度（对于列）。
基线：根据元素的实际基线垂直对齐元素。
灵活布局：Flex Grow
此属性决定弹性项目在需要时扩展的能力。它使用无单位值作为比率，指示项目应占用的 Flex 容器内的可用空间部分。
当所有项目的 flex-grow 值为 1 时，容器中的任何剩余空间将在它们之间均匀分配。如果一个子项的值为 2，则它的目标是占据另一个子项的两倍空间（或者至少尝试这样做）。
可调整内容：Flex Shrink
当容器内的弹性项目超过可用空间时，弹性收缩的概念就变得相关。在这种情况下，此属性确定项目可以减小大小的程度，旨在防止任何内容溢出。
简而言之，假设您有一个包含多个项目的 Flexbox 容器。如果这些项目的总大小对于容器来说太大，则 flex-shrink 值就会发挥作用。它决定了每个物品愿意按比例收缩多少，以便所有物品都适合容器内而不会溢出。
最佳布局：Flex Basis
该flex-basis属性定义了弹性项目的起始主要大小。该大小对应于内容框的尺寸，除非使用该box-sizing属性进行其他更改。当宽度自然由内容本身决定时，默认行为类似于使用width: auto;。
在这种情况下，项目根据其包含的内容占用空间。此外，您可以显式设置特定值，如 中所示flex-basis: 15em;。此属性本质上提供了对 Flex 项目如何沿主轴建立其初始大小的控制，并且在排列 Flex 布局时特别有用。
Flex 布局的好处
轻松对齐： Flex 布局擅长对齐容器内的项目，无论是水平还是垂直。这对于创建居中元素、均匀分布的内容和导航栏特别有用。
简化编码：在 Bricks 中使用 Flex 简化了创建复杂布局的过程。您不需要在 CSS 代码中依赖浮动、定位或复杂的计算，从而获得更清晰、更易于管理的样式。
均匀的空间分布： Flex 布局在项目之间均匀分布空间，使其成为创建需要元素之间间距一致的网格或列表的绝佳选择。
节省开发时间： Flex 布局简化了设计流程，从而缩短了开发周期并减少了手动调整的需要。
Grid 和 Flex 布局的比较
Grid 布局和 Flex 布局之间的区别是：
维度和灵活性： Grid 和 Flex 广泛用于响应式网页设计。关键区别在于维度。Grid 提供二维布局控制，水平和垂直排列元素，而 Flex 提供灵活性，专注于水平或垂直的单个轴。这些工具使开发人员能够管理复杂而灵活的网页设计。
对齐：在网页设计中对齐元素至关重要，网格和 Flex 布局提供了有效的解决方案。Grid 作为二维布局工作，而 Flex 非常适合一维设计。Grid 使用数字坐标，而 Flex 使用相对定位和边距，使元素调整更加平滑。
项目管理： Flex 和 Grid 在项目管理方面表现出色。Flex 允许轻松操纵元素大小、位置和顺序。网格及其数字坐标可在二维空间内提供精确的放置。两者之间的选择取决于项目要求和期望的结果。
例如，选择 Flex 布局的好处之一是它使处理页面上的项目变得更简单。与需要手动设置每个元素的大小和位置的 Grid 不同，Flexbox 通过调整元素之间的间隙和位置来自动完成此操作。这意味着您需要更少的代码来获得您想要的外观，尤其是在较大的项目中。Flexbox 还可以让您在更改页面大小时更轻松地移动内容，从而确保您的设计在不同屏幕上都能正常运行。
总结
总之，Grid 和 Flexbox 都是创建响应式网页设计的强大布局，每种布局都有其独特的优势。Grid 提供对二维布局的精确控制，而 Flexbox 则简化了网站建设项目管理和响应能力。两者之间的选择取决于您项目的具体需求。网格非常适合复杂布局和结构化设计，而 Flexbox 适用于对齐和灵活性至关重要的简单布局。通过了解这些布局系统的差异和优点，您可以优化您的网页设计流程并创建具有视觉吸引力和用户友好的网站。
