Flexbox迅速成为全球最常用的CSS布局方法之一。这一新特性也在2013年被《Net》杂志评为“最佳新网络技术”。

为了给 flex 元素提供更合理的默认最小尺寸，本规范引入了一个新的 auto 值，作为 CSS 2.1 中定义的 min-width 和 min-height 属性的初始值。

当我们真正掌握了 Flexbox 布局模式的奥秘，我们就能构建出绝对令人难以置信的作品。无需任意断点即可伸缩的流体布局。在本实用互动教程中，我们将揭开 Flexbox 算法的神秘面纱，学习如何利用它实现非凡的效果。

Flexbox布局模式给网页布局提供了极大的方便，它更grid布局一样都是新出现的新型布局模式，为了让web开发者更容易的理解这种布局，本页内容提供了一个学习实验flexbox布局的场所，让大家更快更容易的了解flexbox布局的语法、用法和使用场景

一个flex父容器元素能给它的子元素建立一种新型的flex内容布局。这种布局其实是和将元素设定为display:block是很相似的，只是在flex布局里block换成了flex。float属性不好影响flex布局，flex父容器的margin不会和其子元素的margin有重叠效果。Flex父容器元素所形成的block容器特性跟普通的block容器元素所表现的特征完全一样。

本文并不是试图讲解flexbox布局里的各种属性如何工作，而是用图解的方式介绍flexbox里的各种属性和属性值如何让布局起变化，以及如何变化。

这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念，通过学习flexbox布局，你会发现以往遇到的所有的关于布局的问题，现在都可以轻松解决了。