设计师的Flexbox和网格指南

设计人员需要了解哪些有关这些转换布局工具的知识。

自1996年问世以来,CSS已经走了很长一段路,但是我们可用于布局的工具并没有太大变化。表格布局过于僵化,基于浮点的布局基本上是一种技巧,基于定位的布局无法适应,而且任何一种都无法有效地处理大量复杂性。不要误会我的意思-这些方法确实使我们受益匪浅,但它们并非旨在用于复杂的布局。

这些旧的布局方法的缺点在响应式Web设计中变得更加明显,在该设计中,拥抱Web的流动性至关重要。

有了flexbox和grid,我们终于有了专门用于布局的工具,这些工具更加有效,并且没有以前的布局方法所必需的技巧。它们为解决旧问题开辟了新的可能性,启用了以前无法实现的功能,并解决了响应式网页设计所面临的实际问题。

弹性盒

Flexbox,又名CSS柔性盒,是一种新的布局方法,可为我们提供对齐控制,而其他CSS方法都无法产生这种对齐方式。它在“微型布局”方面表现出色:能够在容器中的各个项目之间对齐,排序和分配空间,或更改元素的宽度或高度以最佳填充可用空间的能力。

改进包装

在响应式Web设计中,可用的宽度随视口宽度的变化而变化。这可能会导致意外的内容包装,尤其是当内容的长度超过设计的长度或内容的容器太窄时。我们可能以前都看过:设计考虑了“理想”内容的长度,但是一旦实现并添加了真实内容,内容就会自动换行到下一行,因为空间不足或中断了其内容容器。两者都不理想,并且可能导致布局中断。

问题是不能确保可用空间始终足够大以容纳长度可能不同的内容。传统上,我们使用CSS Media Queries来调整特定断点处的布局,以缓解内容包裹问题。但是,媒体查询没有考虑内容本身的长度,它们会响应明确的宽度或高度。这通常导致过多的媒体查询,无法在明确的断点处控制特定的内容。

使用Flexbox改进包装的示例

Flexbox通过使我们能够利用可用空间,然后在不可用时包装内容来解决此问题。这种自动调整行为不仅方便,而且可以提高可维护性,因为我们不必依靠断点来手动调整样式。上面的示例演示了这种行为:如果有足够的可用空间,则在标题旁边显示位置标签,如果没有足够的可用空间,则将位置标签对齐标题下方的左侧。

传统方法(例如浮动)会导致位置标签在较小的视口上保持右对齐,这不理想。您可以通过将标签浮动到特定断点的左侧来更正此问题。这种方法的问题在于,现在您依靠断点来更改内容的样式,该样式的长度可能会有所不同。

改进的间距和对齐方式

关于CSS中的间距和对齐方式,我们必须聪明地完成所有非默认行为。即使是看起来微不足道的效果在CSS中也可能很棘手,例如垂直对齐或在项目之间平均分配空间,都必须依靠变通方法或破解。有些事情是完全不可能实现的。

Flexbox通过在宽度或高度未知的区域内的未知数量的项目之间分配空间并在X或Y轴上对齐项目来解决此问题。它的工作原理就像素描工具或Illustrator之类的设计工具如何控制间距和对齐方式,从而实现了我们期望在网络上进行的控制。

使用Flexbox改善空间分布的示例

可以在上面看到此控件的一个很好的示例:导航项目均匀分布,垂直居中,并且第一个和最后一个项目与导航容器的边缘齐平。使用传统方法(例如将行内块应用于项目或依赖表布局)将不可能实现这一点。

源订单

源顺序指的是元素根据在HTML中出现的位置在页面上显示的顺序。默认情况下,元素将默认从上至下,从左至右显示-其宽度由其显示属性确定。

在考虑您的设计如何适应各种视口宽度时,文档的自然原始顺序应该可以指导您,但是有时候修改它以重新排列项目很有用。在flexbox之前执行此操作的唯一方法是隐藏元素并显示另一个元素,从而导致HTML重复,或者依赖于绝对定位,当内容大小可变时,这种定位并不总是有效。使用flexbox,您可以简单地修改弹性项目的顺序,而无需修改基础HTML结构。

使用Flexbox订购商品的示例

上面的示例演示了Flexbox中的排序:我们在页脚左侧显示徽标,该徽标与页眉一致。在小视口上,我们在徽标之前显示位置。这种重新排序很有意义,因为在这种情况下位置更为重要。

网格布局

CSS网格布局是专门为Web创建的二维布局系统。它使我们能够将页面分为多个区域,每个区域都可以在大小,位置和层方面进行进一步定义,从而形成了功能强大的本机框架。

适合目的

CSS从未真正适合于目的布局工具,因此我们必须在如何将网格应用到工作中方面具有相当的创造力。网格框架已经出现,可以满足这种需求,但并非没有引入自己的问题。许多最流行的网格框架要求在标记中定义布局,这可能导致代码膨胀,可维护性问题,并模糊文档结构和表示形式的分离。

使用网格,我们不再需要网格框架-它是直接移植到CSS中的本地框架。它使我们能够以直观的方式在CSS中定义布局,同时始终包含Web的默认流动性。这种新的布局工具的功能是无止境的,它使我们能够完成只有Javascript才能实现的布局。

网格布局示例

下一代Web布局

在布局方面,我们已经陷入困境了很长时间。既定的模式和CSS中以前的布局工具的局限性使我们过去走的是布局同质性。您无需花很多时间在网上发现它:标题,主要内容,侧边栏和页脚。

响应式Web设计的出现引发了页面布局的一些新想法,随之而来的是一些好的模式:放弃侧边栏,简化设计并专注于内容。但是,我们也看到了无处不在的模式出现,以至于我们听到“所有网站看起来都一样”的感叹。

网格布局将使我们能够退出以前的布局,并为我们提供构建下一代布局所需的工具。我们最终可以围绕内容构建内容,而不是将其强制为可在其他每个响应式网站上找到的通用设计模式。

告诫

请注意,并非所有浏览器都支持Flexbox和网格功能。我们必须考虑到每个项目的受众是谁,并确定大多数用户是否将从这些更高级的功能中受益,同时为不支持的浏览器提供合理的备用。为旧版浏览器中的用户提供简化的用户界面,并为较新版本的浏览器中的用户增强功能是完全可以接受的。

还有更多。多很多。

我们仅介绍了flexbox和grid可以做的事情。幸运的是,有很多很棒的文档可以介绍这些新版式工具的功能。这是我的一些最爱:

弹性盒

格网

在CSS中进行布局时,任何为Web构建的人都会痛苦地意识到各种限制。通常,这需要对设计进行折衷,以使其在开发中能够按预期工作,或者更糟糕的是,依靠Java脚本来实现所需的行为。

flexbox和网格布局的到来标志着Web布局的新时代。在布局方面,我们必须采用一种新的思维方式,以不受过去的习惯,缺点和黑客的束缚。让我们拥抱这些新工具,并重新探索网络布局的可能性。