小编推荐：掘金是一个面向程序员的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

Flexbox 布局将我们从CSS的邪恶（如垂直对齐）中拯救了出来。

很好，Flexbox 确实实现了这个目标。 但掌握新的弹性模型可能还是具有一点挑战性的。

所以，让我们以动图的形式来看看 Flexbox 的工作原理，这样我们可以使用它来构建更好的布局。

Flexbox 的基本原理是让布局变得灵活和直观。

为了实现这个目标，它让容器自己决定如何均匀分配它的子元素 – 包括子元素的大小和相互之间的间隔。

这听起来是很不错的原则。 但让我们看看它在实践中又会是什么样子的呢。

在本文中，我们将探讨 5 个最常见的 Flexbox 属性。我们将探索他们究竟做什么，如何使用它们，以及它们会产生什么实际效果。

愚人码头注：对于基本的感念建议你先阅读 CSS3 Flexbox属性可视化指南

属性 #1: display:flex

这是我们的示例页面，如图：

你有 1 个灰色的 div 容器，包含了 4 个不同大小和颜色的 div 子元素。 到目前为止，每个 div子元素都是默认的 display: block 。 因此，每个矩形子元素(flex项)都占据了一整行的宽度。

为了开始使用 Flexbox ，你需要将你的容器(container)变成一个 flex 容器。 这很简单：

#container {
  display: flex;
}

愚人码头注：首先请搞懂几个概念：
flex container(flex 容器)是父元素，也就是上图中灰色的容器元素；flex item(flex项)是flex 容器的直接子元素，也就是上图中彩色的矩形元素。原文中用了矩形元素表述，本文用 矩形子元素(flex项) 或者 flex item(flex项) 来表述。

不用很多的改变 – 你的 div 子元素现在已经显示为内联形式了。 但在对于布局来说，已经发生了很大的变化。 你其实给你的每个矩形子元素(flex项)添加了 flex context （上下文）。

现在，您可以开始在这个上下文中 定位 它们，这样与传统 CSS 相比会简单很多。

属性 #2: Flex Direction（排列方向）

Flexbox 容器有两根轴线：主轴(main axis)和与之垂直的交叉轴(cross axis)，默认情况如下图所示：

默认情况下，flex item(flex项)沿着主轴从左到右排列。这就是为什么 flex 容器应用了 display: flex 属性后，你的矩形子元素(flex项)就会默认排列在一条水平线上的原因。

然而，Flex-direction属性可以改变主轴方向。

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

这里有一个重要的区别：flex-direction: column 并不是把矩形子元素(flex项)从主轴移到交叉轴上对齐，而是让主轴自身从水平变成垂直。

对于flex-direction，还有一些其他选项值：row-reverse 和 column-reverse。效果看图就明白了：

属性 #3: Justify Content（flex 项在主轴上的对齐）

justify-content控制 flex item(flex项) 在主轴上的对齐方式。

在这里，你将深入了解一下主轴和交叉轴的区别。 首先，让我们回到 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 是两端对齐，使每个矩形子元素(flex项)之间的间隔是相等的，但两端的矩形子元素(flex项)不会和容器之间产生间隔。

space-around 则会在每个矩形子元素(flex项)的两边产生一个相同大小的间隔，也就是说两端的矩形子元素(flex项)和容器之间的间隔大小正好是两个矩形子元素(flex项)之间间隔大小的一半（每个矩形子元素产生的间隔不会重叠，所以间隔变成两倍）。

最后一点：请记住，justify-content 决定 flex item(flex项)沿主轴的对齐方式，flex-direction 决定了主轴的方向。 当看到下一个属性的时候就会发现这两点很重要…

属性 #4: Align Items (flex 项在交叉轴上的对齐)

如果你掌握了 justify-content属性，那么掌握 align-items 属性也就变得轻而易举了。

前面讲到 justify-content 定义了 flex item(flex项) 在主轴(main axis)上的对齐方式，而 align-items 属性则定义了 flex item(flex项) 在交叉轴(cross axis)上的对齐方式。

让我们将 flex-direction 属性重置为 row，我们看到的 主轴(main axis) 和 交叉轴(cross axis) 与上图是一致。

然后，让我们深入的了解下 align-items 属性的值：

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

前三个值与 justify-content 属性中的值是完全一样的，所以这里就不再解释了。

但是，接下来的两个值却有点不一样。

stretch值会使每个 flex item(flex项) 的高度占据整个 交叉轴(cross axis)，而 baseline 使每个 flex item(flex项) 按照他们段落标签的文本基线（baseline）对齐。

（注意 对于 align-items: stretch 来说，必须将每一个矩形子元素(flex项)的高度设置为 auto，否则 height 属性将会覆盖该 stretch）

对于 align-items: baseline 来说，要注意如果去掉段落标签或者没内容，矩形子元素(flex项)就会按照每个矩形的底部对齐，如下图所示：

愚人码头注：
科普：文本基线（英语：Baseline）指的是多数字母排列的基准线。详细说明请查看[维基百科中关于Baseline的说明]
原文中关于 `align-items: baseline` 的文字和图片表述不是非常清晰，看看下图或许更容易理解：

为了更好地演示主轴和交叉轴的区别，让我们结合 justify-content和align-items，看看在 flex-direction 两个不同属性值的作用下，轴心有什么不同：

flex-direction 取值为 row 时，每个矩形子元素(flex项)会沿着水平的主轴排列，而取值为 column 时，它们就会沿着垂直主轴的向下排列。

虽然这些矩形子元素 (flex 项) 在两种情况下都可以水平或者垂直居中，但对于这些矩形子元素来说，一个是水平排列，一个垂直排列。

属性 #5: Align Self (flex 项的自身对齐)

align-self 允许你单独设置每个 flex item(flex项) 的对齐方式。

它会覆盖 flex container(flex 容器) 的 align-items 属性。默认情况下，所有 flex item(flex项) 的 align-self 属性均为 auto，他们继承了 flex 容器的 align-items 属性。

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// 只有这个矩形元素会居中。

下面你将设置两个矩形子元素(flex项) 的 align-self 属性，其余的应用 align-items: center 和 flex-direction: row，让我们看看会发生什么：

结论

尽管我们只介绍了 Flexbox布局 的一点皮毛，但对于基本的对齐，或者垂直排列的布局来说，这些属性应该足够了。

如果你想观看更多的 GIF Flexbox 教程，或者如果本教程对你有所帮助，你可以评论。

续文：《更多关于Flexbox布局如何工作的 – 用大彩图和GIF动画解释》

原文地址：https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35#.pr7928unu

更多关于 Flexbox 的优秀文章：

• CSS3 Flexbox属性可视化指南
• Flexbox布局是如何工作的 – 用大彩图和GIF动画解释
• 更多关于Flexbox布局如何工作的 – 用大彩图和GIF动画解释

• CSS3 Flexbox解决方案
  更多关于 CSS Grid 布局的优秀文章

• 5分钟学会 CSS Grid 布局

• CSS Grid 布局完全指南(图解 Grid 详细教程)
• 如何使用 CSS Grid 快速而又灵活的布局

---

如果你觉得本文对你有帮助，那就请分享给更多的朋友

关注「前端干货精选」加星星，每天都能获取前端干货