成都app开发

2022-07-29 分类：网站建设

无论是纵横交错的郊区景观街道，还是报纸的布局，网格都会带来秩序和组织。它们还允许设计人员将网站布局中的元素分组。Flexbox和CSS网格布局在合并内容和图形时都很有用，但是它们的工作方式却大不相同。我们将看一下是什么使这些布局方法与众不同，如何在自己的Web设计中应用它们以及如何一起使用它们。

Flexbox入门

Flexbox擅长为您提供一维布局的控制。并且，顾名思义，它允许子元素根据需要缩小和扩展。

‍

在flexbox开发之前，就已经有了黑暗。设计师在使用CSS浮动创建网格布局时费尽心思，但不能保证他们可以在不同的屏幕尺寸上工作。然后，在这种黑暗中出现了flexbox，这是一束光束，允许设计师创建网格状的尺寸布局，并帮助进一步发展响应式设计。

Flexbox的开发是为了使使用垂直或水平一维布局更容易对齐内容。flexbox布局中的元素可以设置其高度或宽度，以适应不同的屏幕尺寸。

Flexbox布局包含两个元素：

flex容器（或flex父级）：这是顶层或父级元素。可以将它想象成一个容纳一堆小盒子的大盒子。

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

Webflow使您可以轻松设置flex容器和flex子代的样式。让我们看一下flex布局UI：

一旦在Webflow中创建了一个容器并在其中嵌套了div块，就可以将其显示属性设置为flexbox，这会将这些div块转换为flex子级。弹性布局设置控制子项的显示方式。在选择水平或垂直之后，您可以对齐并对齐flex子元素，控制它们在其父容器中的分布方式。

对齐：将元素放置在横轴上（即，您为父级设置的相反方向）。如果主轴是水平的，则交叉轴将是垂直的，反之亦然。

对齐：这是内容在主轴上的对齐方式（即，您为父级设置的方向）。

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

了解这种样式在Webflow中如何工作的最简单方法是尝试我们的Flexbox游戏教程。仔细阅读本教程几次以了解这些不同控件的工作方式是非常有帮助的。我们将看几个例子，扰流板警报为您提供一些答案。

在这里，伸缩容器设置为水平布局。选择中心对齐将这些圆圈推到屏幕中间。

好吧，让我们快速看一下如何对齐垂直排列的元素。这来自flexbox教程的8级。

将flex布局设置为垂直后，我们将元素对齐到末尾（看起来像右对齐的按钮），然后对齐间距以使它们均匀分布。这会将彩色圆圈一直放置在最右边，并将它们均匀分布在垂直空间上。

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

这是我们教程中的另一个示例，显示了包装如何影响flex子代。如果不选择此选项，则单行上会有太多元素-将子级包裹起来可以为它们提供更多空间，并有助于使布局更整洁。

Flexbox最适合简单布局或顶部导航栏等较小功能。如果要创建分屏，侧边栏或英雄封面，flexbox提供了一种快速的解决方案。在我们的flexbox简介中了解其他flexbox应用程序。

对于需要在垂直轴和水平轴上都进行控制的更高级的网格，CSS网格可为您提供渴望的功能。

通过有趣的方式学习flexbox ...

无需编写任何代码，就可以掌握28个日益具有挑战性和趣味性水平的flexbox的基础知识。

现在播放

CSS网格基础

CSS网格使您可以控制网格模板的列和行，从而创建像这种复古笑脸一样的“像素” 。

CSS网格比flexbox允许更复杂的布局，因为它在水平和垂直轴（列和行）上组织内容。这个微笑的表情符号在flexbox中是不可能的。像素或块在二维中具有固定位置。没有像使用flexbox那样包装元素。

乍一看，CSS网格布局设置非常类似于flexbox。它允许您更改对齐方式，块的分布以及它们的显示方式。

CSS网格最适合更复杂的布局。将CSS网格视为将多个元素锚定到页面上的一种方法。对于具有多个需要组织的内容和图像块的布局，网格非常实用。Flexbox不适用于这些涉及更多的布局，因为它只能让您控制元素在单个方向上的排列方式。

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

例如，您可以使用flexbox将元素（如按钮）在特定网格单元内垂直和水平居中（因为使用其他CSS方法居中……很棘手）。

而且，您还可以翻转此方案，使用网格来控制卡中数据的放置，这些卡的布局由Flexbox更高级别地确定。这对于将flexbox的灵活性与网格的精确度结合起来非常方便，适用于包含大量数据的卡，例如您可能需要的房地产清单。

您可以在此视频中了解有关将Flexbox和网格一起使用的更多信息：

注意：尽管这些布局模块的UI有所更改，但基本概念保持不变。

要了解有关网格的更多信息，请查看我们的CSS网格页面 -它具有6个免费的可克隆网格布局，因此您可以自己制作！

CSS网格和flexbox：2种组织内容的不同方式

刚开始设计时，Flexbox和CSS网格可能会显得笨拙。最好的办法是开始设计。进行一些实验和一些解决问题的方法将帮助您精通两者。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容