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

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

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

现在就让我们开始吧！

你的第一个 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看看。

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

对齐内容和对齐项目

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

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

控制单个项目

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

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

.logout {
    margin-left: auto;
}

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

.search {
    margin-left: auto;
}

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

flex 属性

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

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

.container > div {
    flex: 1;
}

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

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

.search {
    flex: 1;
}

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

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

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