一、Flexbox布局的概念
Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。
Flex布局更适合小规模的布局，可以简便、完整、响应式的实现各种页面布局。但是，设为Flex布局以后，其子元素的float、clear和vertical-align属性将失效。Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。
Flex布局是一个完整的模块，它包括了一套完整的属性。其中采用 Flex 布局的元素，称为 Flex 容器，简称"容器"。它的所有子元素就是容器成员，称为 Flex 项目，简称"项目"。
容器默认存在两个轴：水平轴（main axis）和垂直轴（cross axis），项目默认沿主轴排列（水平轴）：
这里面涉及到了几个概念，下面来看一下：
- main axis: Flex 父元素的主轴是指子元素布局的主要方向轴，它由属性flex-direction来确定主轴是水平还是垂直的，默认为水平轴。
- main-start & main-end: 分别表示主轴的开始和结束，子元素在父元素中会沿着主轴从main-start到main-end排布。
- main size: 单个项目占据主轴的长度大小。
- cross axis: 交叉轴，与主轴垂直。
- cross-start & cross-end: 分别表示交叉轴的开始和结束。子元素在交叉轴的排布从cross-start开始到cross-end。
- cross size: 子元素在交叉轴方向上的大小。
二、父元素属性
想要使用flex布局，首先需要给父元素指定为flex布局，这样容器内的元素才能实现flex布局：
<div class="container"></div> .container { display: flex | inline-flex; } 复制代码
这里有两种方式可以设置flex布局，使用display: flex;会生成一个块状的flex容器盒子，使用display: inline-flex;会生成一个行内的flex容器盒子。如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-
flex。多数情况下，我们会使用display: flex;。
父元素（容器）可以设置以下六个属性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1. flex-direction
flex-direction：主轴方向，它决定了容器内元素排列方向，它有四个属性值：
.container { flex-direction: row | row-reverse | column | column-reverse; } 复制代码
（1）flex-direction: row：默认值，沿水平主轴从左到右排列，起点在左沿
（2）flex-direction: row-reverse：沿水平主轴从右到左排列，起点在右沿
（3）flex-direction: column：沿垂直主轴从上到下排列，起点在上沿
（4）flex-direction: column-reverse：沿垂直主轴从下到上排列，起点在下沿
2. flex-wrap
flex-wrap：容器内元素是否可以换行，它有三个属性值：
.container { flex-wrap: nowrap | wrap | wrap-reverse; } 复制代码
（1）flex-wrap: nowrap：默认值，不换行。当主轴的长度是固定并且空间不足时，项目尺寸会随之进行调整，而不会换行。
（2）flex-wrap: wrap：换行，第一行在上面
（3）flex-wrap: wrap-reverse：换行，第一行在下面
3. flex-flow
flex-flow 是 flex-direction 属性和flex-wrap属性的简写，默认为:flex-flow:row nowrap，用处不大，最好还是分开来写。该属性的书写格式如下：
.container { flex-flow: <flex-direction> <flex-wrap>; } 复制代码
4. justify-content
justify-content：元素在主轴的对齐方式，它有五个属性值：
.container { justify-content: flex-start | flex-end | center | space-between | space-around; } 复制代码
这里以水平方向为主轴进行举例，即flex-direction: row。
（1）justify-content : flex-start：默认值，元素在主轴上左对齐（上对齐）
（2）justify-content : flex-end：元素在主轴上右对齐（下对齐）
（3）justify-content : center ：元素在主轴上居中对齐
（4）justify-content : space-between：元素在主轴上两端对齐，元素之间间隔相等
（5）justify-content : space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5. align-items
align-item：元素在交叉轴上的对齐方式，它有五个属性值：
.container { align-items: flex-start | flex-end | center | baseline | stretch; } 复制代码
这里以水平方向为主轴进行举例，即flex-direction: row。
（1）align-item：flex-start：交叉轴的起点对齐（上面或左边）。设置容器高度为 100px，项目高度分别为 20px、40px、60px、80px、100px，效果如图所示：
（2）align-item：flex-end：交叉轴的终点对齐（下面或右边）。设置容器高度为 100px，项目高度分别为 20px、40px、60px、80px、100px，效果如图所示：
（3）align-item：center：交叉轴的中点对齐。设置容器高度为 100px，项目高度分别为 20px、40px、60px、80px、100px，效果如图所示：
（4）align-item：stretch：默认值、如果元素未设置高度或设为auto，将占满整个容器的高度。假设容器高度设置为 100px，而项目没有设置高度，则项目的高度也为 100px：
（5）align-item：baseline：以元素的第一行文字的基线对齐
