弹性布局

css中弹性盒子是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以"弹性伸缩"其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。

最重要的是，flexbox布局与方向无关，不同于常规布局（基于垂直的块（block）和基于水平的内联（inline））。 虽然传统布局适用于页面，但它们对于大型或复杂的应用程序布局来说缺乏灵活性（特别是在改变方向，调整大小，拉伸，收缩等方面）。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

了解两个基本概念，接下来会频繁提到：

① 容器： 需要添加弹性布局的父元素；

② 项目： 弹性布局容器中的每一个子元素，称为项目；

 了解两个基本方向，这个牵扯到弹性布局的使用：

① 主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；

② 交叉轴： 与主轴垂直的另一方向，称为交叉轴。

弹性布局的名称概念：

1、容器：需要添加弹性布局的父元素；项目：弹性布局容器中的每一个子元素，称为项目。

2、主轴：在弹性布局中，我们会通过属性规定水平/垂直方向（flex-direction）为主轴；与主轴垂直的另一方向，称为交叉轴。

弹性布局的重要的几大基础属性：

1、flex-direction属性决定主轴的方向（即项目的排列方向）。

row（默认值）： 主轴为水平方向，起点在左端；

row-reverse： 主轴在水平方向，起点在右端 ；

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。