弹性盒子 101

Flexbox 是当今 UI 开发领域的必备元素，因为它可以让你在创纪录的时间内创建响应迅速且优雅的布局🙆‍♂️

我们将逐一介绍具体示例，并构建包含导航栏和卡片列表的以下UI 。

在每个步骤中，我们都会学习基本的 Flexbox 概念，以帮助您顺利入门，因此请随意创建自己的codepen来尝试它们。

学习导航栏的基础知识

我们的 HTML 看起来是这样的：

<nav>
  <a href="#">
    <img src="https://image.flaticon.com/icons/svg/145/145867.svg"/>
  </a>
  <a href="#">Home</a>
  <a href="#">Blog</a>
</nav>

左边有一个图标，右边有两个链接，非常标准。

此导航栏将使用三个 Flexbox 概念：display、justify-content和align-items，因此让我们逐一介绍它们。

展示

nav {
  display: flex;
}

使用 Flexbox 时，你首先要输入的内容。它使我们的每个子元素nav都能利用 flex 上下文。

现在我们可以开始移动容器的子元素了。

内容对齐

nav {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

它决定了容器元素在主轴上的放置位置。

每个属性的含义都一目了然，但值得仔细研究一下。

在我们的例子中，我们希望我们的项目位于导航栏的右侧（末尾）：

nav {
  display: flex;
  justify-content: flex-end;
}

“但是 Chris，使用这个值会让flex-end 所有内容都移到容器的末尾，包括图标！”，你说得完全正确，我们希望图标位于左侧，其他所有内容都位于右侧。为此，我们可以使用一个非常巧妙的技巧，将图标设置margin-right为“自动”，告诉布局自动将图标放置在最左侧，就像这样。

/* Target the first link in our navbar (the icon)  */
nav > a:first-child {
  margin-right: auto;    
}

一切开始看起来更好了，尽管我们仍然需要将图标垂直居中。

对齐项目

nav {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

它确定容器子项在横轴（与 使用的轴垂直的轴justify-content）上的位置。

在我们的例子中，我们希望垂直对齐导航栏项目，如下所示：

nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

就这样，我们有一个功能齐全的导航栏，并且学习了 Flexbox 的三个基本概念！🎉

奖励：flex-direction

尽管我们在这里没有使用它，但我认为值得一提flex-direction。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

正如其名称所示，它决定了容器的主轴，可以将其视为创建水平（默认）或垂直布局。

试试看！你会发现，将其定义为column将获得预期的结果：垂直布局。

进一步了解卡片列表

好吧，您可能已经看到了之前共享的示例 UI，我们现在将致力于创建此卡片布局并使其具有响应性（这得益于 Flexbox 而变得非常容易）。

我们的 HTML 看起来是这样的：

<article class="card-container">

  <div class="card">
    <a class="card-link" href="#">       
      <time>May 4, 2019 | 3 min read</time>
      <span>
        <h2 class="card-title">My awesome card</h2>
        <p class="card-description">...with a description !</p>
      </span>
    </a>
  </div>

  <!-- More cards below -->
</article>

我们将在多行上显示大量卡片，这些卡片可以是文章（例如christopherkade.com上的文章）、TODO 或任何您想要的内容。

为此，我们只需要一个新概念：flex-wrap。

弹性包裹

它告诉我们的容器在需要时将其项目包装到多行中。默认情况下flex，所有项目都放在同一行。

.card-container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

因此，我们.card-container现在看起来如下所示：

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

尝试移动窗口的大小，它会做出响应并自动呈现适合每行的卡片数量。

等等，就这些吗？

是的，Flexbox 入门并不难。当然，它还有很多功能，但这些已经足够制作出很酷的布局了。

如果您想进一步了解，请务必查看 CSS-Trick 的Flexbox 完整指南，这是撰写这篇文章的主要灵感来源。

当然，如果您对 Flexbox、CSS 整体或 Javascript 有任何疑问，请随时通过 Twitter 发送给我@christo_kade 😄