flex弹性布局

解决问题： 1. 元素没办法垂直居中对齐(当我们修改了元素内容大小，元素内容多少都要重新计算内部据padding)。

2.页面布局的时候，两个元素没有办法在一行显示左右排列，float可解决(不推荐)。

特点： 所有的项目都在一行显示。
当所有项目之和大于容器的宽度，所有项目也会在一行显示，每个项目的宽度都会自动缩小。

flex弹性布局相当于容器和项目之间关系：容器就是装东西（元素，标签）相当于父元素，项目相当于子元素。

介绍哈主轴和交叉轴：1.主轴就是水平方向向右(X轴）左 中 右。
2.交叉轴就是垂直方向向下(Y轴）上 中 下。

接下来说下 怎样创建flex布局：
display:flex; 使用这一行代码后(在父元素中使用这一行代码)，该元素就是容器里面所有的子元素，都会自动成为项目。

 **容器属性：**

flex-direction：决定主轴方向排列方式
值：
row：主轴为水平方向、起点在最左端（默认）

row-reverse：主轴为水平方向、起点在最右端

column：主轴为垂直方向、起点在最上端

column-reverse：主轴为垂直方向、起点在最底端

(其余的可以自己去实现)

flex-wrap：决定项目是否换行
前提条件：项目之和要大于容器的宽度
值：
nowrap：不换行（默认情况）
wrap：换行
wrap-reverse：换行，且第一行在最下方

justify-content：决定主轴上的对齐方式
值：
flex-start：左对齐
center：居中对齐
flex-end：右对齐

space-evenly、space-around、space-between 都要用到剩余空间
剩余空间的计算方式：容器宽度 - 项目之和的宽度

space-evenly：平均分配
space-around：每个项目两侧要相等，项目之间的间隔是项目与边框的距离两倍
space-between：两端对齐、项目之间的间隔要相等

align-items：决定了交叉轴上的对齐方式
值
flex-start：交叉轴上起点对齐
flex-end：交叉轴上结束点对齐
center：交叉轴上居中对齐（垂直居中对齐）

align-content：多根轴线的对齐方式
前提条件：要有多根轴线（需要换行显示）
换行显示
flex-start：与交叉轴起点对齐
flex-end：与交叉轴终点对齐
center：与交叉轴中点对齐
space-between：与交叉轴两端对齐、轴线之间平均分配
space-around：每根轴线的两侧距离要相等。所以轴线之间的距离要比轴线与边框的距离大一倍
stretch：轴线占满整个交叉轴（默认值）