display: flex意思是弹性布局，弹性布局简直不要太好用，今天就来和大家具体讲讲它的属性和用法吧。

flex的属性（以下五个属性语法都是加在父元素身上的。）
一 1. flex-direction: row; 布局的排列方向 （主轴排列方向）
row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse 显示为行。但方向和row属性值是反的，在水平方向上为从右往左。
column 显示为列 方向为在垂直方向上从上到下
column-reverse 显示为列。但方向和column属性值是反的
2. flex-wrap : nowrap; 是否进行换行处理。此语法是加在父元素身上的。
nowrap; 默认值，不换行处理
wrap; 换行处理
wrap-reverse; 反向换行
flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的，顺序一定不能乱)。
3. justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。
flex-start ： 子项都去起始位置对齐。
flex-end ： 子项都去结束位置对齐。
center ： 子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只
有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
4.align-items : 每一行中的子元素上下对齐方式。
flex-start; 顶部对齐
center; 居中对齐
flex-end; 底部对齐
5.align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)
默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。
值跟justify-content取值是相同的。
## flex的 注意事项
注：1.默认情况下，在弹性盒子中的子元素的左右排列的。
2. 水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。
3. 垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。
4. 当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）
5.当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
6.弹性布局中用的频率比较多的语法：
display : flex;
flex-direction; 等于 row|row-reverse|column|column-reverse|initial|inherit;

justify-content;   等于flex-start|flex-end|center|space-between|space-around|initial|inherit;

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */

/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;

/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

align-items; 等于 stretch|center|flex-start|flex-end|baseline|initial|inherit;