flex布局介绍

背景

CSS 2.1 定义了四种布局模式 ― 由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法：

CSS Flexbox Layout（Flexible Box）模块（目前为 W3C —— 候选推荐规范）致力于提供一种更高效的布局方式，即便子项尺寸未知（或动态）的情况下，对齐、分布容器子项之间的空间，因此谓之flex。

弹性布局背后的主要思想是让容器能够改变子项的宽、高以及顺序，以最合适的方式填充可用空间（以适应各种显示设备和屏幕尺寸）。弹性容器扩展子项以填充可用空间，或者收缩子项防止溢出。

与常规布局方式相反，Flexbox 布局是方向无关的（块级元素基于垂直方向，行内元素基于水平方向）。虽然常规布局方式在网页上使用还行，但对于支持大型、复杂的应用缺乏灵活性（特别是方向改变、调整大小、拉伸、收缩等场景）。

注：Flexbox 布局非常适合组织应用组件和小型布局，而 Grid 布局则为大型应用布局设计。

在CSS3中，引入了新的布局模式：flex布局，即弹性盒子布局，是为了呈现复杂的应用与页面而设计出来的。

flex布局只与块布局有非常微薄的相似之处。flex布局不具有浮动或是多栏等等在块布局中可以用的复杂、面向文本／文档的属性，换来的是简单、强大的分配空间与对齐内容的工具，是 Web 应用与复杂的页面所需要的。

一个flex容器的内容：

开始愉快地学习flex布局吧！