“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布局方案范例让容器总是处于垂直水平居中的位置。使用盒模型来工作是非常通用的。

Flexbox让我们对过去无法真正达到的对布局的掌控更进了一层，过去我们浮动、清除浮动，与inline-block间的空格斗争，强制display:table，甚至用position:absolute来撑开内容。现在我们不需要依赖这些解决方案使得内容在不支持伸缩特性的浏览器可见。Flex的特性给我们所以构建的内容增加了一系列重要工具，但不是替代之前存在的东西，而是改进我们如今的构建方式。

Flexible boxes layout是W3C为了更好的在网页中排版和布局而设计出来的一个模块。它用来可以处理更加复杂的布局。它本质是盒模型的延伸，它可以进一步去规范容器中子元素盒模型之间的相对关系。

Flexbox是CSS3新增的一个功能特性，对于布局有很大方便之处。但浏览器支持力度各异，而且其规范也还在不断更新之中，也造成很多同学还不敢在实际项目中使用Flexbox的缘故。Philip Walton在他的Github中创建了Flexbugs库，用来回收Flexbox相关的Bug。主要宗旨是收集Flexbox跨浏览器存在的问题和解决方案。目标是让你使用Flexobx构建一个网站能得到你想要的效果，并且能在这里找到相应的解决方案。而这篇文章就是以创建Sticky footer布局为例，介绍了如何解决Flexbox在浏览器兼容的解决方案。