5 分钟快速学习 CSS Flexbox 已翻译 100%

oschina 投递于 2018/01/17 15:04 (共 6 段, 翻译完成于 01-18)
阅读 1030
收藏 4
0
加载中

在本篇文章中你将会学习到 CSS Flexbox 的基础知识,而这些知识在过去这些年已经变成了网页开发者的必备技能。

我们将会使用一个导航条作为示例,因为它是 Flexbox 的典型使用场景。这里会向你介绍其模块的最常被用到的属性, 而忽略那些不怎么重要的。

现在就让我们开始吧!

LeoXu
翻译于 2018/01/17 19:26
0

你的第一个 Flexbox 布局

一个 Flexbox 布局有两个主要的组件,就是容器(container项目(items

如下是我们的示例的 HTML ,里面包含了一个容器和三个项目:

<nav class="container">
  <div>Home</div>
  <div>Search</div>
  <div>Logout</div>
</nav>

在我们将其转成 Flexbox 布局之前, 这些 </div> 元素将会相互堆叠在其它元素之上,像下面这样:

要将这个转成一个 Flexbox 布局,我们只要简单地给 container 加上如下的 CSS 属性就可以了:

.container {
    display: flex;
}

这样就会自动沿着水平方向对项目进行很好的定位了。

如果你想要瞧一瞧实际的代码,你可以去这个 Scrimba playground看看。

现在让我们来把这些项目重新编排一下。

LeoXu
翻译于 2018/01/17 19:32
0

对齐内容和对齐项目

Justify-content 和 align-items 是两个 CSS 属性,它们可以帮助我们来安排容器中项目的位置。他们控制着项目是如何沿着主轴和横轴来定位的。

在我们这个案例中主轴是水平方向的,而横轴则是垂直方向的(但也并不总是这样):


在本文中我们只是来看看 justify-content , 因为我已经发现这个的使用得要比 align-items 更多。不过,在我后续的课程中,我会对两者都进行详细的描述。

让我们通过使用 justify-content 来将所有的项目沿着主轴居中对齐:

.container {
    display: flex;
    justify-content: center;
}

或者我们也可以将其设置为 space-between, 这样就会在项目之间添加空位,像这样:

.container {
    display: flex;
    justify-content: space-between;
}

如下是你可以给 justify-content 设置的值:

  • flex-start (默认值)

  • flex-end

  • center

  • space-between

  • space-around

  • space-evenly

我建议你把这些都试试,好看看它们在页面上是怎么显示的,那样就可以让你对这个概念有一个正确的理解。

LeoXu
翻译于 2018/01/17 19:42
0

控制单个项目

我们也可以对单个项目进行控制。我们假设如果想要保持前面的两个项目在左边,而把退出按钮移动到右边。

要这样做,我们会将 margin 设置成 auto ,这是一个不错的古老技术。

.logout {
    margin-left: auto;
}

如果我们想要搜索项目和退出项目都被放到右手边,只要简单地给搜索项目添加 margin-left 就行了。

.search {
    margin-left: auto;
}

这样做就会将搜索项目尽可能地推向右手边,同时退出项目也会将推向右手边:

LeoXu
翻译于 2018/01/17 19:48
0

flex 属性

到目前位置,我们只是有几个固定宽度的项目。如果我们想要它们自适应宽度呢?为了实现这个想法我们有了被叫做 flex 的属性。它使用起来比起用百分比这种古老方法要简单得多。

我们会简单地锁定所有的项目,然后将给它们设置一个值为 1 的 flex 样式属性。

.container > div {
    flex: 1;
}

如你所见,它会拉伸项目以填充整个容器。

在许多场景中你可能会只想要一个项目使用额外的宽度,如果还有可供灵活使用的宽度的话,你其实是可以只对一个项目进行设置的。例如我们可以让搜索项目占据整个所有的额外空间:

.search {
    flex: 1;
}

LeoXu
翻译于 2018/01/17 19:55
0

在我们结束本文之前,我想要提一提,flex 属性其实是三个属性的一个简写:这三个属性是 flex-grow、flex-shrink 和 flex-basis。 不过,要学会它们耗时超过了5分钟,因此它超出了教程的范围。

如果你对学习它们感兴趣的话,那么我会在后续的课程中对这三个属性进行说明。现在你已经学习了基础知识,已经完全准备好可以学习我们完整的课程并成为一名 Flexbox 大师了。

我正在创建一个 CSS Flexbox 课程。如果你想早一点接触到话,只要在这里留下你的 email,我就会在课程准备后提供给你。

LeoXu
翻译于 2018/01/17 20:01
0
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(0)

返回顶部
顶部