flexbox介绍

CSS flexbox（也称为弹性盒）为 Web创作者提供了对容器内元素定位、对齐和大小的控制。它允许您执行诸如指定元素如何垂直和水平对齐、更改其外观顺序、更改所有元素的布局方向等操作。

在 flexbox 之前，由于现有布局模型的限制，常见的网站布局通常难以实现。现有的布局模型并不能真正满足现代 Web 上如此常见的复杂 Web 应用程序。块布局模型是为文档布局而设计的。内联模型是为文本设计的。表格布局模型设计用于以表格格式布局二维数据。定位布局允许非常明确地定位一个元素，而不考虑文档中的其他元素。

由于这些布局模型的局限性，网站布局通常使用浮动元素、定位元素甚至表格布局的组合来实现。让一个网站在各种屏幕尺寸上都能正常显示通常是一件令人头疼的事情。让网站看起来正确的唯一方法是在 CSS 和 HTML 代码中加入一堆 hack——这通常看起来违反直觉。这违背了任何体面的 Web 开发人员所追求的整个“呈现和内容分离”的方法。

CSS 弹性布局模块由 CSS 工作组开发，旨在提供可以克服这些问题的框模型。它于 2016 年 5 月 26 日成为 W3C 候选推荐，但早在那之前就已获得广泛的浏览器支持。

Flexbox 由各种“flex”属性以及一大堆对齐属性组成。正如您将在本篇中看到的，对齐是 flexbox 的重要组成部分。而且现在网格布局也使用了大部分相同的对齐属性，因此 W3C 将对齐属性从 flexbox 模块中分离出来，并将它们移到了自己的“对齐”模块——CSS Box Alignment Module Level 3。

基本上，flexbox 属性定义了 flex 项目的大小、它们如何包装以及它们进入的方向。对齐属性定义了 flex 项目如何在其容器内水平和垂直对齐。