Flexbox 实现了帮助我们脱离 CSS 苦海（例如垂直居中）的目标，但想精通它却需要你应对一些挑战。所以，我们将通过一些动画让你直观地了解 Flexbox 的工作原理，并使用它来构建灵活的布局。Flexbox 的基本原则是提供一种构建灵活、直观的布局方式。为了达成这一目标，它让容器决定如何分配容器成员的大小以及空间。这听起来相当不错，那么，让我们来看看实践中它是如何工作的。在本文中，我们将深入的探讨 Flexbox 中 5 个常见的属性。看看它们能做什么，如何使用它们，以及使用它们构建的布局是什么样的。

属性 #1: Display: Flex

以下是示例页面：

前三个值与 justify-content 属性中的值完全一致，没有太多需要解释的地方。但是，接下来两个值却有些不同。Stretch 指的是如果项目未设置高度或设为 auto，项目将占满整个容器。而 baseline 是指项目将与段落标签的底部对齐。

结论

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