原文地址

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

译文不一定与原文内容完全相符,有我对其中的一些理解,但不会有太大的出入。

引言

Flexbox是一种更高效更灵活的布局方式,它可以让一些元素在一个容器里很容易的实现各种对齐以及控制这些元素之间的距离,即使这些元素的大小不固定(这也是它为什么叫flex的原因)。

其实Flex布局的主要思想是可以让容器去改变子元素的宽度、高度、顺序以及它们之间的距离等等(当然,这种布局方式针对不同的设备,不同分辨率都是起作用的)。Flex盒子会根据有效的空间去扩展或收缩元素。

比较重要的一点是,…