5分钟学会CSS Flexbox

在本文中，您将学习 CSS Flexbox 的基础知识，它在过去几年中已成为 Web 开发人员和设计师必备的技能。

我们将以导航栏为例，因为这是 Flexbox 的一个非常典型的用例。本教程将向您介绍该模块最常用的属性，同时省略一些不太重要的属性。

我还创建了一个免费的 12 部分 Flexbox 课程。感兴趣的话可以在这里查看！

现在让我们开始吧！

你的第一个 Flexbox 布局

Flexbox 布局的两个主要组件是容器和项目。

下面是我们示例的 HTML，其中包含一个带有三个项目的容器：

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

在我们将其转换为 Flexbox 布局之前，元素将像这样堆叠在一起：

我添加了一些样式，但这与 Flexbox 无关。

为了将其转变为 Flexbox 布局，我们只需为容器提供以下 CSS 属性：

.container {  
    display: flex;  
}

这将自动将项目沿水平轴正确定位。

如果您想查看实际代码，可以前往这个 Scrimba 游乐场。

现在让我们稍微调整一下这些项目。

对齐内容和对齐项目

Justify-content和align-items是两个 CSS 属性，它们帮助我们在容器中分布项目。它们控制项目如何沿主轴和横轴定位。

在我们的例子中（但并非总是如此），主轴是水平的，而横轴是垂直的：

在本文中，我们将仅讨论justify-content，因为我发现它的使用频率比 更高align-items。不过，在我的 Flexbox 课程中，我会详细解释这两个属性。

让我们使用以下方法将所有项目沿主轴justify-content居中：

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

或者我们可以将其设置为space-between，这将在项目之间添加空间，如下所示：

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

以下是您可以设置的值justify-content:

• flex-start （默认）
• 弯曲端
• 中心
• 空间之间
• 空间环绕
• 空间均匀分布

我建议你尝试一下这些，看看它们在页面上的效果如何。这应该能让你对这个概念有一个正确的理解。

控制单个项目

我们还可以控制单个项目。例如，假设我们想将前两个项目保留在左侧，但将logout按钮移到右侧。

为此，我们将使用将边距设置为 的旧技术auto。

.logout {  
    margin-left: auto;  
}

如果我们希望将search项目和logout项目都推到右侧，我们只需将添加margin-left到search项目中即可。

.search {  
    margin-left: auto;  
}

它会将搜索项尽可能地推到右侧，同时还会将注销项也一起推到右侧：

flex 属性

到目前为止，我们只有固定宽度的项目。但是如果我们想让它们响应式显示呢？为了实现这一点，我们引入了一个名为 的属性flex。这比以前使用百分比的方式要简单得多。

我们只需定位所有项目并赋予它们flex值1。

.container > div {  
    flex: 1;  
}

正如您所见，它将物品拉伸以填满整个容器。

很多情况下，你可能希望其中一个项目占据额外的宽度，因此只需将其中一个项目设置为灵活宽度即可。例如，我们可以让该search项目占据所有额外的空间：

.search {  
    flex: 1;  
}

在结束本文之前，我想提一下 flex 属性实际上是三个属性的简写：flex-grow，flex-shrink和flex-basis。但是，学习这些属性需要五分钟以上的时间，因此超出了本教程的范围。

但是，如果您有兴趣了解它们，我会在我的免费 Flexbox 课程中详细解释所有三个属性。

现在您已经学习了基础知识，您肯定已经准备好参加我的完整课程并成为 Flexbox 大师！

感谢阅读！我叫 Per，是Scrimba的联合创始人，我热爱帮助人们学习新技能。如果您想及时收到新文章和资源的通知，请在Twitter上关注我。