说到overflow对于CSSer而言并不会陌生，用来控制内容溢出的现象。而很多时候我们还会使用text-overflow来控制内容溢出的显示。一般是直接截取，另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是，我们今天要说的灵活overflow。

对于Flex布局，阅读了 大漠老师和其他老师写的文章后，我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下，我去查阅Flexbox 的 W3C 规范文档。

这篇文章介绍了Flexbox模块所有基本概念，而且是介绍Flexbox模块的很好的一篇文章，所以这篇文章非常的长，你要有所准备。学习Flexbox可不是件很有趣的事情，因为它将挑战你所知道的CSS布局方面的知识。当然这也是非常正常的，因为一切知识都是值得学习的。另外你要认值对待Flexbox。因为它是现代Web布局的主流方式之一，不会很快就消失。它也成为一个新的W3C标准规范。既然如此，那让我们张开双臂，开始拥抱它吧！

“Card”这样的UI组件在现在的Web中经常可见，但我们制作这方面的UI组件方式仍然受到一定的限制。直到现在，通过CSS Grid和Flexbox的组合，可以使卡整齐对齐，响应性更好，并适应其中的内容。接下来看看我们是如何制作的。

在最近的一个项目中，我们终于将Flexbox广泛用于页面布局当中。通过这次实战，让我对Flexbox相关知识有了更进一步的了解，也在这方面增涨了不少的知识。接下来，我将分三个部分来解释Flexbox在Web布局中的实战。

您使用 flexbox吗?上周我在 twitter 上，问了这个问题，很惊讶地发现，不少于 50%的人回答是。之所以感到惊讶是因为，直到最近，我并不在我的任何项目中使用 flexbox ，我想我一定是唯一的一个。我不使用 flexbox 有几个原因。但是，经过一些调查研究之后，我的担忧得到明显的减弱，我已经开始了转变。所以这里有你应当开始使用Flexbox的六个理由。

Flexbox布局（Flexible Box）模块(目前处于W3C工作草案)旨在提供一个更佳有效的布局方式，更好的控制项目的对齐和自由分配容器空间，即使它们的大小是未知的或动态的。因此得其名"flex"。本文是根据CSS-Tricks整理的一篇《A Complete Guide to Flexbox》和W3C中文兴趣小组翻译的Flexbox规范整理。

Flexbox最大的优点是计算空间能力强，尤其是当对一个容器里未知数量的子项目进行布局时。更具体来说，当给导航栏或者网格布局时，它们所需的空间有可能远超过现在计算的数值。想象一下在CMS里面当用户增删导航栏的项目时，既不想更改样式，又要填充其空间。你甚至可以用它同时计算不同类型的单元。对于不熟悉Flexbox的人来说，在CSS里它就是一种计算并分布空间的智能布局模式，同时也解决了一些困扰多年的布局问题以及hack。

Flexbox布局官方称之为CSS Flexible Box布局模块,他是CSS3中的一种新的布局模式。Flexbox可以控制未知容器元素的对齐方式，排列方向，排列顺序等，甚至是在未知大小的容器也能这样做。Flex容器的主要特点是能够修改其子元素（Flex item）的宽度或高度，使其在不同的屏幕尺寸中填补可用的空间。许多设计人员和开发人员发现使用Flexbox来布局更容易，可以使用更少的代码，更简单的方式实现更复杂的布局，也使整个开发过程更为简单。Flexbox布局算法基于水平或垂直的块或行内元素来布局。Flexbox布局常用于小的应用程序组件之中，而CSS Grid布局模块将应用于大规模的布局之中。

虽然语法可能比较混杂，但 Flexbox 还是名不虚传的。它创造的是可伸缩的、有弹性的、可改变视觉顺序的智能盒子。它提供了简单的CSS布局方案范例让容器总是处于垂直水平居中的位置。使用盒模型来工作是非常通用的。