1.语法：display：flex（定义当前元素为弹性盒子）
①弹性盒子是一种布局方式
②特点：改变子元素在父元素的排列方式
采用flex布局的元素可以叫做flex的容器，他的子元素也会自动成为容器，也叫作flex项，通俗点来说在flex布局中，行级元素不用转换为块级元素，也可以拥有块级元素的属性。
2.弹性盒子的方向： 弹性盒子的轴方向与我们日常学过的坐标轴类似，只不过主轴方向与x轴相同而交叉轴方向与坐标轴中y轴相反，当然这只是系统给出的默认值，我们还可以通过代码来实现改变弹性盒子的主轴方向：
**语法：**flex-direction：主轴方向 例子1.flex-direction:row;水平正向（也是主轴方向的默认值）如图 2.flex-direction:row-reverse;(水平反向)
需要注意的时x轴方向改变不会影响交叉轴方向的改变
3.flex-direction：colum 垂直向下（交叉轴默认值） 4.flex-direction:colum-reverse 垂直反向（箭头指着上方） 定义内部弹性盒子是否换行 flex-wrap：nowrap 不进行换行（默认值) 内部元素呆在一行 flex-wrap：wrap 换行 内部元素自动换行 弹性盒子主轴的对齐方式 语法：justify-content：属性值；
①justify-content：flex-start 表示轴的开始方向对齐（默认值） 如图元素靠左对齐
②justify-content：flex-end 表示轴的结束方向对齐 元素靠右对齐
③justify-content：flex-center表示居中对齐
④justify-content：flex-between表示元素两端对齐
⑤justify：space-around；两个元素的间隔时元素与边框距离的2倍
元素在交叉轴的对齐方式 语法：align-items：属性值； ①align-items：flex-start；交叉轴开始方向（默认值） ②align-items：flex-end；交叉轴结束方向 ③align-items：flex-center；居中对齐
这三种对齐方式与主轴雷同，大家可以手动去试一试，接下来还有一个补充的对齐方式： align-items:baseline(基线对齐)元素基线对齐。
补充一个弹性盒子单元素居中的技巧： 在弹性盒子中分别设置主轴上的居中和交叉轴上的居中就可以实现 justify-content:center; align-items:center;
好了，今天的分享就到这里明天继续。
