弹性布局

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式： 在不同方向排列元素。 重新排列元素的显示顺序。 更改元素的对齐方式。 动态地将元素装入容器。 基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 在 Flexbox 模型中，有三个核心概念： flex 项（注：也称 flex 子元素），需要布局的元素。 flex 容器，其包含 flex 项。 排列方向（direction），这决定了 flex 项的布局方向...