跳到主要内容

Flexbox的网页设计师指南

你有没有开始使用灵活的盒子布局模块在你的项目中呢?虽然该模块已经存在了一段时间,但是阻止前端开发人员使用它作为一个主要障碍网页设计工具

首先,直到最近,规范还在不断变化,并没有得到很大的支持。今天,所有现代浏览器都支持Flexbox。第二个障碍是掌握Flexbox的概念非常困难。虽然它非常强大,但是有许多活动部件,而且很难学习。但是,能够跨多种屏幕尺寸排列页面元素并使它们以可预测的方式运行的能力非常值得。

The web designer's guide to flexbox

想要开始使用flexbox吗?继续阅读!

在本文中,我将帮助您了解flexbox背后的基本概念。理解这些核心概念将打开一个极其灵活,易于创建布局的整个世界(特别是对于响应式网页设计)。

下一代设计

Flexbox是下一代工具,可帮助您使用CSS创建布局;是否要布置网站的某个部分或显示媒体元素网格。它使您能够轻松地对齐,居中,对齐,缩放和重新排序页面上的元素,而不必诉诸讨厌的CSS黑客或脆弱的JavaScript依赖项。

Flexbox可以替换浮动,定位技巧,内联块布局甚至 - 颤抖 - 表格显示布局。如果你曾经把你的头发拉出来想知道为什么一些看似简单的布局很难甚至不可能在CSS中,你会喜欢Flexbox。

Flex元素

Flexbox的神奇之处在于父'flex容器'和子'flex项'之间的关系。为了完全控制Flexbox,您必须抛开任何浮动,定位和清除的想法。这是一种布局页面的全新方式。

设置显示:弯曲;在父元素上将其转换为弹性容器,并将其所有直接子元素转换为弹性项目。设置标记后,可以使用许多可用的flex属性之一来创建布局。

注意:任何HTML元素都可以是flex容器或flex项。任何:之前:后您在Flex容器上的伪元素将被视为子元素,因此将被视为一流的Flex项目。

行和列

The default flex-direction set to row

默认的flex-direction设置为row

Flexbox中有两个轴控制页面上的弹性项目的布局:主轴和横轴。默认情况下,Flexbox设置为主轴从左到右(或者相反,对于从右到左阅读的语言),横轴从上到下(如上所示)。在你记住它之前,请注意这可以 - 而且 - 将随之改变弯曲方向属性。

The main axis flipped with flex-direction:row-reverse;

主轴以弯曲方向翻转:行反向;

默认情况下,Flexbox设置为弯曲方向:行;这意味着物品在主轴上从左到右连续流动。我们可以切换主轴,使其从右向左流动挠曲方向:行反向(如上图所示)。

Fig 3: The main axis switched from horizontal to vertical with flex-direction:column;

主轴从水平方向切换到垂直方向,弯曲方向:列;

要切换主轴和横轴,我们将布局更改为挠曲方向:柱;。这将在一列(上图)中改变主轴和柔性物品流从左到右到从上到下。我们也可以从底部开始,然后通过翻转主轴向上移动挠曲方向:列反向

中心项目

Flexbox的最大优点之一是它允许您以任何方式对齐您的内容 - 即使垂直居中也是一件轻而易举的事!围绕Flexbox对齐通常会产生混淆,因为我们使用三种不同的属性来修改Flex项的对齐方式。

其中一个原因是这些属性沿主轴和横轴对齐项目。所以不要问,“我如何垂直或水平居中?”您必须首先确定您的轴指向哪个方向,然后确定使用哪个CSS属性来正确对齐和居中的Flex项目。

在接下来的几个例子中,我将试图完美地集中我的项目。但是,您应该知道每个属性都有许多对齐选项。如需完整列表,我建议保留这个CSS-Tricks Flexbox参考便利。

横轴

Fig 4: align-items:center; will centre our items along the cross axis, which in our case is top-to-bottom

对齐项:中心;将我们的项目沿横轴居中,在我们的例子中是从上到下

默认情况下,flex项沿着横轴在整个Flex容器中伸展。如果我们想沿横轴居中项目,我们可以使用对齐项我们的Flex容器上的属性并将其设置为中央(如上所示)。

此外伸展中央,我们也可以使用柔性启动柔性端将项目分别固定在顶部和底部。最后,我们有基线,它将对齐文本底部(或基线)的项目。当您尝试对齐具有不同字体大小的项目时,这非常有用。

沿主轴对齐

Fig 5: Justify-content:center; will centre our items along the main axis

证明内容:中心;将我们的项目沿主轴居中

现在我们在横轴上进行定心 - 在我们的情况下从上到下 - 我们需要在主轴上进行定心工作。为此,我们使用证明内容:中心(如上所示)。

就像对齐项,我们也可以使用柔性启动要么柔性端, 以及空间之间空间的周围,它将均匀地分配元素之间的剩余空间。当使用不能加上100%边距和宽度的网格布局时,这非常有用。

请记住,如果我们从默认切换挠曲方向:行;挠曲方向:柱;,主轴可以从左到右变为从上到下。当我们切换到列时,align-items变为水平对齐,而justify-content变为垂直对齐。

对齐多条线

对齐项证明内容当你有一行或一列内容时工作得很好,当你处理多行内容时,事情会变得有点棘手弯曲缠绕:包裹;在flex容器上。

对齐内容工作就像证明内容,但是当我们有多行内容时就开始了。通过应用对齐含量:中心;我们可以确保线条将锚定在十字轴的中间,并从那里将元素居中。

就像证明内容,我们也可以使用柔性启动柔性端空间之间空间的周围。但是,这次它们指的是内容的行或列之间的空间,而不是flex项本身。

现在,只有四行CSS,我们有一个防弹方式,垂直和水平居中Flex容器的所有直接子。

.container {align-items:center;证明内容:中心;对齐含量:中心;弯曲缠绕:包裹; }

填补空间

到目前为止,我们所学到的关于对齐的一切都与flex容器以及它如何对齐它的孩子有关。使用align-self可以覆盖对齐项通过单独设置在Flex容器上设置的属性对齐自柔性启动柔性端中央底线要么伸展

Flexbox的另一个经常被误解的部分是如何使用增长,收缩和基础值。再次抛弃像素完美网格的任何想法并拥抱flexbox是灵活的,这是有帮助的。

可以为每个弹性项目分配一个FLEX-增长弯曲收缩和a柔性基础值。使用这些值,我们可以指示我们的理想尺寸,然后指定项目在有多余空间或不足空间的情况下应该如何操作。从那里,这些物品将自己解决。

我喜欢将这些属性视为:

  • FLEX-增长:如果有额外的空间,我该如何行动?柔性物品将如何分配余下的空间?
  • 弯曲收缩:当没有足够的空间容纳所有弹性项目时,我该如何行动?而不是溢出容器,谁将放弃自己的一部分,使一切适合?
  • 柔性基础:不是在元素上设置明确的宽度或高度,理想情况下,宽度(作为行)或高度(作为列)是什么?

请注意,虽然可以单独指定这些属性,但您几乎总是使用flex速记来指定增长收缩基础价值一下子。查看视频Flexbox.io有关flex速记属性的更详细说明。

成长和萎缩

我们的想法是,我们可以使用基准值设置理想的宽度或高度,然后当灵活项目有额外的空间时,FLEX-增长物业将决定需要多少额外费用。同样,当没有足够的可用空间时,shrink属性将决定每个元素将放弃多少(或“收缩”)。

FLEX-增长弯曲收缩属性是无单位,比例值。它们描述了与所有其他弹性项目相关的多少 - 项目将增长或缩小。

假设我们有两个灵活项目:视频和演职员表。我们将视频设置为Flex:1 1 700px;和学分Flex:3 3 300px;。现在这两个项目的父项都是灵活容器,当它是1000px宽时,事情就完美无缺:视频占用了700px,而信用占用了另外300px。

当flex容器宽1500px时会发生什么?我们有额外的500px可以使用,那么它去哪儿了?那就是FLEX-增长视频设置为1,而信用设置为3.这意味着所有额外的房间,信用将花费三倍(375px)视频将获得的空间量(125px)。

相似性,当我们的flex容器小于1000px时会发生什么?让我们说这是900px:那么视频和学分如何表现呢?与花车不同,我们不仅要突破新线,要么按百分比缩小。相反,我们使用弯曲收缩属性。

由于学分有弯曲收缩3和视频有一个弯曲收缩为1,这意味着学分将放弃视频的三倍空间。因此,由于我们需要从某个地方削减100px,所以信用额将放弃75px,而视频容器只会放弃25px。

导航大小未知

我们来看一下flexbox的一些常见用例。如果您曾经使用像WordPress这样的CMS导航,那么您就会知道很难预测导航中会包含多少元素。

均匀地在所有元素之间分配空间需要JavaScript。例如,如果你有三个元素,每个元素占宽度的33.33%,而五个元素每个应该占20%。

让我们来看看这个常见的代码作为例子:

使用flexbox,我们可以轻松创建此导航,甚至只需几行CSS即可实现响应。我们需要做的就是将导航容器(通常是无序的项目列表)设置为显示:弯曲,然后每个flex项目弯曲:1要么FLEX-增长:1;

这将水平拉伸列表项并使其完全适合可用宽度。这很好用的原因是我们将flex项设置为增长1,这意味着当剩余额外空间时,它将在所有项之间平均分配。

有关详细信息,并了解如何以不同方式调整导航元素的大小,请务必观看可用的响应式导航教程Flexbox.io

等高柱

Fig 6: align-items:center; will centre our items along the cross axis, which  in our case is top-to-bottom

对齐项:中心;将我们的项目沿横轴居中,在我们的例子中是从上到下

你有没有希望CSS有一个高度:同为最高的兄弟财产?我们都在那里 - 我们有三列内容,所有内容都有不同的大小(上图)。内容是动态的,网站是响应式的,因此在每个内容上设置固定的高度是不可能的,并且JavaScript修复并不理想。

之前我们了解到align-items的默认值是拉伸的。这意味着flex项目将伸展以适合父Flex容器。如何定义Flex容器的高度?几乎总是由最高内容框的高度。

例如,让我们采用以下标记。如果我们用浮点数和百分比宽度渲染它,我们将看到容器的大小由中间元素调整,而另外两个元素只有它们需要的高度。

我个子小

我是一个非常高的盒子,是最大的

我是一个中等大小的盒子

With flexbox, boxes stretch to fit the flex container and all become equal height

使用flexbox,盒子可以拉伸以适应柔性容器,并且所有盒子都变得相同

现在,如果我们只是使用显示:弯曲;在flex容器上,并将每个元素设置为33.33%柔性基础属性,即使Flex项目在整个横轴上延伸,无论其中包含多少内容(参见上图)。

.container {display:flex; } .box {flex:1 1 33.33%; }

Flexbox的好处

我希望你现在看到学习如何使用Flexible Box模块的价值。虽然它不会解决你使用CSS的所有问题,但它是每个设计人员和开发人员都应该知道的重要工具,并且拥有自己的库。

已经有一段时间了,因为我们已经有了这么大的东西来到CSS,我认为它是CSS中较难学习的部分之一。请记住,你通过学习花车推动,所以Flexbox完全是你可以掌握的东西!

必备资源

什么是Flexbox?!

“什么是Flexbox?!”是我创建的免费20视频培训课程。在本课程的前半部分,每个视频都介绍了Flexbox的一个新方面。我保持这些美观和简短,所以你可以在以后需要刷新特定部分时参考它们。本课程的后半部分深入探讨了一个真实的例子,详细介绍了如何使用Flexbox快速轻松地解决我们面临的许多常见布局问题。

Flexbox的完整指南

一旦掌握了Flexbox,就可以将培训资料放在一边。但是,保持视觉参考很方便。来自Chris Coyier的这个出色的资源分解了13种不同的Flexbox属性,显示了哪些适用于Flex容器,哪些适用于Flex项目。

Flexbugs

Flexbox并非没有错,就像任何事情一样,您应该了解一些跨浏览器的错误和解决方法。 Flexbugs概述了一系列已知的Flexbox错误,并提供了可能的修复和解决方法。

阅读更多:



翻译字数超限