Flexbox的网页设计师指南

IT资讯 2018-08-01 45 次浏览 0 条评论

了解如何创建更好的CSS网格系统,以便轻松地在网页上居中,对齐,缩放和重新排序元素。

您是否已开始在项目中使用Flexible Box Layout模块?虽然该模块已经存在了一段时间,但是阻止前端开发人员将其用作网页设计工具存在两个主要障碍。

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

网页设计师的flexbox指南

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

下一代设计


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

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

Flex元素


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

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

注意:任何HTML元素都可以是flex容器或flex项。任何:before和:after你在flex容器上的伪元素将被视为子元素,因此被视为一流的flex项目。

行和列

默认的flex-direction设置为row
Flexbox中有两个轴控制页面上的弹性项目的布局:主轴和横轴。默认情况下,设置Flexbox使主轴从左向右(或从右向左的语言相反),横轴从上到下(如上所示)。在记忆之前,请注意这可以 - 并且将 - 都随着flex-direction属性而改变。

主轴以弯曲方向翻转:行反向;
默认情况下,Flexbox设置为flex-direction:row;这意味着物品在主轴上从左到右连续流动。我们可以通过使用flex-direction:row-reverse(如上所示)来切换主轴,使其从右向左流动。

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

主轴从水平方向切换到垂直方向,弯曲方向:列;
要切换主轴和横轴,我们将布局更改为flex-direction:column;。这将在一列(上图)中改变主轴和柔性物品流从左到右到从上到下。我们也可以从底部开始,通过使用flex-direction翻转主轴向上移动:column-reverse。

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

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

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

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

对齐项:中心;将我们的项目沿横轴居中,证明内容:中心;将我们的项目沿主轴居中
现在我们在横轴上进行定心 - 在我们的情况下从上到下 - 我们需要在主轴上进行定心工作。为此,我们使用justify-content:center(如上所示)。

就像对齐项目一样,我们也可以使用flex-start或flex-end,以及空间和空间,这将均匀地分配元素之间的剩余空间。在处理不能达到100%边距和宽度的网格布局时,这非常有用。

请记住,如果我们从默认的flex-direction切换:row;对于flex-direction:column ;,主轴可以从左到右变为从上到下。当我们切换到列时,align-items变为水平对齐,而justify-content变为垂直对齐。

对齐多行


虽然当你有一行或一列内容时,align-items和justify-content工作得很好,但是当你使用flex-wrap:wrap;处理多行内容时,事情变得有点棘手。在flex容器上。

align-content就像justify-content一样工作,但是当我们有多行内容时就会启动。通过应用align-content:center;我们可以确保线条将锚定在横轴的中间,并从那里将元素居中。

就像使用justify-content一样,我们也可以使用flex-start,flex-end,space-between和space-around。但是,这次它们指的是内容的行或列之间的空间,而不是flex项本身。

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

。容器 {
align-items:center;
证明内容:中心;
对齐含量:中心;
弯曲缠绕:包裹;
}
填补空间
到目前为止,我们所了解的关于对齐的所有内容都与flex容器以及它如何对齐其子代有关。使用align-self,可以通过单独设置align-self到flex-start,flex-end,center,baseline或stretch来覆盖flex容器上设置的align-items属性。

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

可以为每个弹性项目分配弹性增长,弹性收缩和弹性基础值。使用这些值,我们可以指出我们的理想尺寸,然后指定项目在有额外或不足的空间的情况下应如何行动。从那里,这些物品将自己解决。

我喜欢将这些属性视为:

flex-grow:当有额外空间时我该如何行动?柔性物品将如何分配余下的空间?
flex-shrink:当所有弹性项目没有足够的空间时,我该如何行动?而不是溢出容器,谁会放弃自己的一部分,使一切适合?
flex-basis:不是在元素上设置一个明确的宽度或高度,理想情况下是宽度(如行)还是高度(作为列)?
请注意,尽管可以单独指定这些属性,但您几乎总是使用flex速记来同时指定增长,缩小和基础值。查看Flexbox.io上的视频,了解flex速记属性的更多详细说明。

成长和萎缩
我们的想法是,我们可以使用基值设置理想的宽度或高度,然后当灵活项目有额外的空间时,flex-grow属性将决定需要多少额外空间。类似地,当没有足够的可用空间时,shrink属性将决定每个元素将放弃多少(或“收缩”)。

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

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

当flex容器宽1500px时会发生什么?我们有额外的500px可以使用,那么它去哪儿了?这就是flex-grow开始的地方。视频设置为1而信用设置为3.这意味着所有额外的由于学分的缩小为3且视频的缩小为1,这意味着学分将放弃视频的三倍空间。因此,由于我们需要从某个地方削减100px,所以信用额将放弃75px,而视频容器只会放弃25px。

导航大小未知

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

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

我们来看看这个常见代码作为示例:

<ul class =“nav”>
<li> <a href="#">主页</a> </ li>
<li> <a href="#">关于</a> </ li>
<li> <a href="#">联络</a> </ li>
</ UL>
使用flexbox,我们可以轻松创建此导航,甚至只需几行CSS即可实现响应。我们需要做的就是设置我们的导航容器(通常是无序的项目列表)来显示:flex,然后将每个flex项目flex:1或flex-grow:1;。

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

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

等高柱

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

对齐项:中心;将我们的项目沿横轴居中,在我们的例子中是从上到下
你有没有希望CSS有一个高度:同为最高兄弟的财产?我们都在那里 - 我们有三列内容,所有内容都有不同的大小(上图)。内容是动态的,网站是响应式的,因此在每个内容上设置固定的高度是不可能的,并且JavaScript修复并不理想。

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

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

<div class =“container”>
<div class =“box”>
<p>我很矮</ p>
</ DIV>
<div class =“box”>
<p>我是一个非常高的盒子,是最大的</ p>
</ DIV>
<div class =“box”>
<p>我是一个中等大小的盒子</ p>
</ DIV>
</ DIV>
使用flexbox,盒子可以伸展以适应弹性容器,并且所有盒子都变得相同

使用flexbox,盒子可以伸展以适应弹性容器,并且所有盒子都变得相同
现在,如果我们只使用display:flex;在flex容器上,并使用flex-basis属性将每个元素设置为33.33%,灵活项目立即在整个横轴上伸展,无论其中包含多少内容(参见上图)。

。容器 {
显示:弯曲;
}

.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错误,并提供了可能的修复和解决方法。
空间,信用将花费三倍(375px)视频将获得的空间量(125px)。

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

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论