图文并茂！8 张 Gif 图学会 Flexbox

Flexbox 实现了帮助咱们脱离 CSS 苦海（例如垂直居中）的目标，但想精通它却须要你应对一些挑战。因此，咱们将经过一些动画让你直观地了解 Flexbox 的工做原理，并使用它来构建灵活的布局。

Flexbox 的基本原则是提供一种构建灵活、直观的布局方式。

为了达成这一目标，它让容器决定如何分配容器成员的大小以及空间。这听起来至关不错，那么，让咱们来看看实践中它是如何工做的。

在本文中，咱们将深刻的探讨 Flexbox 中 5 个常见的属性。看看它们能作什么，如何使用它们，以及使用它们构建的布局是什么样的。

属性 #1: Display: Flex

如下是示例页面：

咱们能够看到，在灰色的容器中，包含了 4 种不一样颜色与大小的 div 元素。每一个 div 元素都默认display: block，所以，每一个四方体都占据了一行的整个宽度。

为了开始使用 Flexbox 布局，你须要将你的容器变为 Flex 容器。这很容易实现：

#container {
  display: flex;
}

你会发现，你的 div 元素已经内行显示了。虽然，看似你只是稍微作了些改变，可是你已经为四方体添加了名为 flex context 的环境。因而，你就能够利用它来定位元素了，这比传统的 CSS 写法要简单了不少。

属性 #2: Flex Direction

Flexbox 容器有两根轴：主轴和垂直的交叉轴，默认状况以下：

项目默认是由主轴（从左到右）排列的，这就是你使用display: flex后，四方体以水平线排列的缘由。

而Flex-direction决定了主轴的方向。

#container {
  display: flex;
  flex-direction: column;
}

这里有一个重要的区别：flex-direction: column所指的是四方体将沿主轴的垂直方向对齐。它使主轴自身从水平到垂直。

而flex-direction还有一些其余的值供你设置，例如：row-reverse与column-reverse.

属性 #3: Justify Content

justify-content属性定义了项目在主轴上的对齐方式。

在这里，你将更多的了解主轴与交叉轴的区别。首先，让咱们回到flex-direction: row值上。

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

justify-content属性包含了 5 个值供你使用：

1. Flex-start
2. Flex-end
3. Center
4. Space-between
5. Space-around

Space-around与Space-between是两个不容易直观理解的值。Space-between实现了两端对齐，而四方体之间的间隔都是相等的。

Space-around使四方体两侧的间隔相等，这意味着四方体之间的间隔比最外边四方体与边框的间隔要大一倍。（每一个四方体贡献了不重叠的等量余量，从而使空间翻倍）

最后一点：请记住 justify-content沿主轴对齐，而flex-direction决定了主轴的方向。它将决定你移动的方向。

属性 #4: Align Items

当你理解了justify-content属性，理解Align Items属性就变得垂手可得了。

justify-content定义了项目在主轴的对齐方式，而align-items属性则定义了项目在交叉轴上是如何对齐的。

当咱们将flex-direction属性值重置为row后，咱们的轴看上去就与上图一致。

那么，让咱们深刻的了解下Align Items属性有哪些值：

1. flex-start
2. flex-end
3. center
4. stretch
5. baseline

前三个值与justify-content属性中的值彻底一致，没有太多须要解释的地方。

可是，接下来两个值却有些不一样。

Stretch指的是若是项目未设置高度或设为auto，项目将占满整个容器。而baseline是指项目将与段落标签的底部对齐。

（请注意，对于align-items：stretch，我不得不将四方体的高度设置为auto，不然height属性将覆盖该stretch）

对于baseline，若是你去掉段落标签，它则会对齐四方形的底部，以下图所示：

为了更好地演示主轴和交叉轴的表现，在基于justify-content属性和align-items属性的值为center的状况下，让咱们看看赋予flex-direction属性两个不一样值后，它的表现如何：

咱们能够看到，对于row值，四方体沿着与主轴水平方向排列，而对于column值，它们则沿着与主轴垂直的方向排列。

即便出现了同时保持水平与垂直居中的状况，二者也不可互换！

属性 #5: Align Self

align-self属性容许你对特定的项目有与其余项目不同的对齐方式，它可覆盖align-items属性。虽然它的默认值为auto，但它继承了父元素align-items的属性。除了auto外，其余都与align-items属性彻底一致。

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// Only this square will be centered.

咱们将在两个四方体上应用align-self属性，而其他的四方体则应用align-items: center与 flex-direction: row，让咱们看看会发生什么：

结论

虽然，咱们仅仅是了解 Flexbox 的一些浅层的使用方法，但这些方法足以让你利用 Flexbox 应对大多数水平与垂直对齐的问题。若是你想观看更多的 GIF Flexbox 教程，或者若是本教程对你有所帮助，你能够点击喜欢或留下评论。

感谢你的阅读。

若是以为文章不错，不妨点个赞。

注：

1. 本文版权归原做者全部，仅用于学习与交流。
2. 如需转载译文，烦请按下方注明出处信息，谢谢！

英文原文：How Flexbox works — explained with big, colorful, animated gifs
做者：Scott Domes
译者：IT程序狮
译文地址：https://zhuanlan.zhihu.com/p/25152672