Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Development
Webdesign

Flexbox 练习︰ 简单的 Web 组件

by
Difficulty:BeginnerLength:ShortLanguages:

Chinese (Simplified) (中文(简体)) translation by Saber Zou (you can also view the original English article)

在本教程中,我们将通过两个练习去学习构建 web 组件︰ 我们将使用 Flexbox 创建一个“缩略图列表”和一个"侧边栏"组件。

Flex

假如你还不了解,"灵活布局"( Flexbox ) 是一个 CSS 的特性,为在一个给定的容器(container)中进行布局、对齐和排序提供了高效的方式。它与 Grid 一起构成了一个更完整的布局模式,以取代设计师多年使用的 float 和 table 等布局方式。

运用 Flexbox,内容可以在任何方向进行排列并调整大小,要么扩展来填充未使用的空间,要么收缩以避免溢出父级元素。

练习 1︰ 缩略图列表组件

列表用于显示一行一行的信息,如播放列表,用户的详细信息或电影列表。通常情况下,这些列表中包含图像,也就是我们熟知的"缩略图"。 传统的对齐图像的方法通常都有点棘手和也会遇到不一致的情况,但运用 Flexbox 我们可以用最少的 CSS 代码定义一个列表组件的样式。

对于这个组件,让我们使用<ul>元素和列表项<li>:

我们将使用 flexbox 创建 .list-item 的布局,并为它们每个赋予两个直接的子元素,如下︰

how flex-grow and flex-shrink behave
 flex-shrink 和 flex-grow 是如何工作的

这张图说明了 flex-shrinkflex-grow 是如何工作的。 .list-item__image 的项是不会收缩的,而 .list item__content 将占用容器 li 里面余下的空间。

以下就是每个 li 的 HTML 结构︰

基本的 CSS 将如下所示︰

以下就是这些基本样式所呈现的效果︰


你会看到头像位于左边,详细的资料在右边。

我从 randomuser.me 获取用户的详细信息。通过添加一些额外的样式(周边的样式、图片的圆角、基本文字样式、 背景颜色等等) 我们会得到这个︰

你可以在 CodePen 上看到完整的 CSS 并随意调整试试看。例如,在 HTML 中把 .list item__image 移动到 .list item__content 之后,将得到一个图像在右侧的缩略图列表,而无需使用任何其他的类或样式。

练习 2︰ 侧边栏组件

很多网站和 web 应用程序都会使用侧边栏作为导航。在本练习中,我们用 flexbox 来构建一个可重用的侧边栏组件。

布局包含三个主要部分︰

  1. Logo 占位
  2. 导航
  3. 用户资料模块

通常情况下,构建这种布局棘手的地方是将用户资料模块放在侧边栏的底部。

使用定位

使用此"传统"的解决方案,我们假设用户资料部分的高度是 70px,因此设定了侧边栏的底部 padding 填充为 70px 。 但要是什么时候我们重新设计了资料部分,从而高度改变了呢?或者,我们想把它放在顶部呢?在这些情况下,我们将需要为侧边栏创建新的类或修改当前的样式,这都不是最理想的方案。

Flexbox 方式

使用 Flexbox 我们可以更合理地解决这个问题。我们将使用在创建缩略图的组件时相同的技术,但有一个小的区别。我们将会采用 flex-direction: column;方向从水平改变为垂直。

组件的顶部和底部部分保持"不能收缩"的特性。由于设定了 flex-grow: 1; ,中间的元素 .sidebar_nav 将填充剩余的空间。

因此, HTML 是这样的︰

这是基本的样式︰

总括来说,.sidebar 组件具有一个属性 flex-direction: column,这 将使得它的子级元素从水平到垂直流动布局。

.sidebar__nav 具有一个属性 flex-grow: 1,这意味着它将容器中的所有可用空间,并将 .sidebar__profile 推到侧栏的底部。

使用此方法,我们不需要担心用户资料框的高度。那么,我们将得到什么呢?

这是侧边栏的最终效果,增加了一些其他的样式,包括一些从 Fontawesome 拿过来的图标。

结论

Flexbox 真的改变了我们网页布局的思路,让人欣喜的是所有现代浏览器也支持。在本教程中,我们仅仅用了 flexbox 的几个属性,还有很多其他的属性等着你去挖掘。 在接下来的《 Flexbox 练习》教程中,我们将创建更多的中间组件,涵盖 Flexbox 的其他功能。

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.