flexbox和CSS网格的网站设计初学者指南

Author: limo

找出您是否应该使用CSS网格或flexbox为您的下一个网站设计,并学习如何将它们一起使用。


无论是纵横交错的郊区街道景观,还是报纸的布局,网格带来秩序和组织。它们还允许网站设计师在网站设计布局中对元素进行分组,Flexbox和CSS网格布局在整合内容和图形方面都很有用,但它们的工作方式非常不同。我们将看看这些布局方法的不同之处,如何将它们应用到自己的网站设计中,以及如何将它们结合起来使用。


开始使用flexbox



在flexbox开发之前,是一片黑暗的,网站设计师们在创建网格布局的过程中一直在与CSS浮动作斗争,并不能保证他们能在不同大小的屏幕上工作。然后,从黑暗中出现了flexbox,一束光允许设计师创建网格状的空间布局,并帮助进一步发展响应式设计。


Flexbox的开发是为了使用一维布局(垂直布局或水平布局)更容易对齐内容。flexbox布局中的元素可以设置它们的高度或宽度,以适应不同的屏幕大小。


flexbox布局由两个元素组成:


flex容器(或flex父元素):这是顶级元素或父元素。把它想象成一个大盒子,里面装着一堆小盒子。


flex子元素:这些是flex容器的内容—大盒子中的小盒子。


Webflow使设置flex容器和flex子元素的样式变得很容易。让我们来看看flex布局UI:



在Webflow中创建容器并在其中嵌套div块之后,可以将其display属性设置为flexbox,该属性将这些div块转换为flex子元素。flex布局设置控制子元素的显示方式。选择水平或垂直后,就可以对齐和调整flex子元素,控制它们在父容器中的分布方式。


对齐:将元素放置在横轴上(即,与您为父级设置的方向相反)。如果主轴是水平的,那么横轴就是垂直的,反之亦然。


调整:这是内容在主轴上的对齐方式(即,你为父级设定的方向)。



这里,flex容器设置为水平,对齐设置为垂直拉伸,对齐设置为从容器的原点开始。


理解Webflow中这种样式如何工作的最简单方法是尝试我们的Flexbox游戏教程,浏览本教程几次对了解这些不同控件的工作原理非常有帮助。我们来看几个例子——剧透警告——给你一些答案。



这里,flex容器被设置为水平布局,选择居中对齐将这些圆圈推到屏幕的中间。


好的,让我们快速看看如何对齐垂直排列的元素,这是来自flexbox教程的第8级。


将flex布局设置为垂直后,我们将元素对齐到末尾(看起来像右对齐的按钮),然后对齐间距,使它们均匀分布。这样就把彩色的圆圈放到了右边,并将它们均匀地分布在垂直空间上。



Flexbox的本质就在于它的名字:它是灵活的。它的强度是它的弹性,拉伸或收缩取决于可用的空间。这种适应性的另一个重要部分是包装flex子元素的选项。如果没有足够的空间容纳容器的所有子元素,flexbox可以将一些子元素推到下一行。


下面是本教程中的另一个例子,展示了包装如何影响flex子元素。如果不选择这个选项,一行中就会有太多的元素——对子元素进行包装可以为它们提供更多的空间,并有助于理清布局。



Flexbox最适合简单的布局,或者像顶部导航栏这样的小功能。如果您想创建一个分屏、侧边栏或英雄封面,flexbox提供了一个快速解决方案。在我们的flexbox简介中了解其他flexbox应用程序。


对于更高级的网格,你需要控制垂直和水平轴,CSS网格给你你想要的力量。


CSS网格基础



CSS grid让你控制网格模板的列和行,让你创建像这个复古笑脸一样的“像素”。


CSS grid允许比flexbox更复杂的布局,因为它在水平和垂直轴(列和行)上组织内容。这个微笑的表情符号在flexbox中是不可能的。像素,或块,在二维中有一个固定的位置。没有像我们在flexbox中看到的那样对元素进行包装。


CSS网格布局设置乍一看很像flexbox,它允许您更改对齐方式、块的分布以及它们的显示方式。



CSS网格最适合更复杂的布局。可以将CSS网格看作是在页面上锚定多个元素的一种方法。网格对于包含多个需要组织的内容和图像块的布局是实用的。Flexbox对于这些复杂的布局没有那么有用,因为它只允许你控制元素在一个方向上的排列方式。


当然,CSS grid和flexbox可以在一个布局中协同工作。您可以在CSS网格中使用flexbox,反之亦然。


例如,您可以使用flexbox在一个特定的网格单元格中垂直和水平地居中一个元素,比如一个按钮(因为使用其他CSS方法居中比较棘手)。


你也可以翻转这个场景,使用网格来控制数据在卡片中的位置,卡片的布局是由flexbox在更高的层次上决定的。这对于将flexbox的灵活性与包含大量数据(比如房地产清单)的卡的网格精度结合起来非常方便。


在这段视频中,你可以了解更多关于同时使用flexbox和grid的信息:


注意:虽然这些布局模块的UI发生了变化,但是底层概念没有改变。


要了解更多关于网格的知识,请查看我们的CSS网格页面——它提供了6个免费的、可克隆的网格布局,这样你就可以创建自己的网格布局了!


CSS grid和flexbox:两种不同的内容组织方式


当你刚开始作为一个网站设计师的时候,Flexbox和CSS grid可能会觉得很笨重。最好的办法就是开始设计。做一点实验和一些问题的解决会帮助你掌握这两者。


相关阅读