一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
背景
现代web开发，需要适应不同屏幕尺寸、设备的大小，灵活显示页面内容；
这就要求，网页可以随着页面尺寸的改变而动态调整布局，float浮动属性可以根据显示设备大小，自动换行显示，但是，浮动可提供的可控制的属性太少了，所以难于随心所欲的控制布局。
比如：
浮动float定位的问题：
想把多个块元素水平放在一行内，要计算的元素太多，一个元素的总宽度=width+padding*2+border*2+margin*2,因此一行内的多个元素都按这个计算总宽度，实在太繁琐。
然而，弹性布局flex,就可以解决这个问题；
弹性布局的优点：自动计算，自适应；弹性布局可自动计算宽度、间距等，使多个元素始终保持最初设计的样子。
弹性布局的概念
容器
弹性布局的容器，简称“容器”，是指要实现布局效果的父元素；
项目
弹性布局的项目，简称“项目”，是指要实现布局效果的子元素；
主轴
主轴，是指弹性布局的多个项目排列方向上的一根轴；
- 如果弹性布局的多个项目按x轴排列，那么x轴就是主轴；
- 如果弹性布局的多个项目按Y轴排列，那么x轴就是主轴；
交叉轴
交叉轴，是指与主轴交叉的一根轴；
- 如果主轴是x轴，那么y轴就是交叉轴；
- 如果主轴是y轴，那么x轴就是交叉轴；
容器的属性
- 使用弹性布局，都要先使父元素变为弹性布局的容器。
1.如果希望弹性布局的父元素独占布局中的一行，就要设置父元素的的display属性为flex;2. 如果希望弹性布局的父元素显示为行内元素特征，与其它元素同在一行内，可设置父元素的display属性为：inline-flex.
- 设置父元素为flex容器后，下一步就可以设置flex容器父元素的属性；
包括： - flex-direction;
- flex-wrap;
- flex-flow;
- justify-content;
- align-items;
flex-direction
可指定容器的主轴及其排列方向。
属性值包括:
- row,默认值，即主轴是x轴，项目从最左端开始向最右排列
- row-reverse,表示项目从最右侧开始，从右向左排列，比如，下面顺序最开始是12345，设置为row-reverse,后变成54321；
- column,主轴是y轴，项目从顶端开始，从上向下排列；
- column-reserve,主轴是y轴，项目从底部向上排列；
flex-warp
flex-warp,专门设置当一个主轴排列不下所有项目时，是否换行显示。
属性值包括：
- nowarp,默认值，表示空间不够时，也不换行，项目自动缩小；
- warp,表示当内容放不下时应该换行显示；
flex-flow
flex-flow是一个简写形式，可同时设置flex-direction和flex-warp两个属性；
写法：flex-flow:flex-direction flex-warp;两个值之间用空格分割；
例如：flex-flow:row nowarp,默认值，表示主轴是x轴，起点在最左端，并且空加不够的时，也不换行，项目自动缩小；
justify-content
专门定义项目在主轴上的对齐方式。
取值分别是：
- flex-start,表示以主轴的起点对齐；
- flex-end,表示以主轴的终点对齐；
- center,表示主轴上居中对齐；
- space-between,表示两端对齐；
- space-around,表示每个项目两端间距相同；
align-items
专门定义所有项目在交叉轴上的统一对齐方式。
取值分别为：
- flex-start,表示项目的以交叉轴上的起点方向对齐；
- flex-end,表示项目的以交叉轴上的终点方向对齐；
- center,表示项目的以交叉轴上的中线居中对齐；
- baseline,表示项目的以交叉轴上基线对齐；
- stretch,如果项目未设置尺寸，就让项目在交叉轴上占满所有空间；
