flex弹性布局
伸缩/弹性布局： display：flex
有效避免浮动布局中脱离文档流现象发生.
1.伸缩容器
display：flex 所在的那个盒子为伸缩容器/父项；
2.伸缩项
伸缩容器内的子元素为伸缩项/子项；
3.具体变化：
a 不再区分块级行内和行内块 全部都可以设置宽和高；
b 默认子项的宽度由内容撑开，子项的高度等于父项的高度；
c 子项使用浮动失效，使用定位，margin，transform仍然有效；
d 默认情况下，flex是不会自动换行的，子项的宽度大于父项的宽度，子项也不会换行，子项只会压缩自身的宽度；
e 设置换行属性 flex-wrap：nowrap; (默认值，不换号) flex-wrap：wrap;(换行)
主轴和侧轴
默认情况下水平方向是主轴，垂直方向是侧轴； 主轴的起点：默认在容器的最左边； 主轴的终点：默认在容器的最右边； 侧轴的起点：默认在容器的最上面； 侧轴的终点：默认在容器的最下面；
flex:1； 默认设置子项的宽度，分配份数，可从下图了解分析：写在子项
1，主轴的起点
flex-direction
1.flex-direction:row；起点在容器的最左边，终点在容器的最右边，从左至右的排版，默认值； 2.flex-direction:row-reverse; ....从右至左排列； 3.flex-direction:column； ....从上而下排列；（col列，常用） 4.flex-direction:column-reverse； ....从下而上排列；
注：
1.每一个伸缩容器都会有主轴和侧轴，主轴和侧轴永远都是十字交叉的，
所以当主轴的方向发生了变化，侧轴方向也会发生变化
2.改变主轴的起点会改变子元素的排列顺序，从左往右123 变成 从右往左321
2，主轴的对齐方式
justify-content
1.justify-content：flex-star；让排版好的伸缩项和主轴的起点对齐，默认值； 左 jc
2.justify-content：flex-end；让排版好的伸缩项和主轴的终点对齐； 右
3.justify-content：center 让排版好的伸缩项和主轴的中点对齐； jcc
4.justify-content：space-between；中间两两之间距离相等，两端对齐； 快捷键 sb
5.justify-content：space-around； 环绕对齐，每个元素的左右都是相同距离， 快捷键 sd 如图人与人之间手拉手，最左边和最有边的人即使旁边没有人，也要计算一只手的距离；
注：
对齐方式的改变不会改变子元素的排列顺序，
伸缩项顺序是从左边平移过来，原理是他会先按照默认主轴的起点排列好， 再进行让伸缩项和主轴的终点对齐，跟float：right的排列顺序是不一样的；
6.justify-content：space-evenly ; 绝对平均 快捷键 sv
3，侧轴的对齐方式
align-items ai
1.align-items:flex-star： 让排版好的伸缩项和侧轴的起点对齐，默认值； 上 aifs
2.align-items:flex-end： 让排版好的伸缩项和侧轴的终点对齐； 下 aife
3.align-items:center： 让排版好的伸缩项和侧轴的中点对齐； aic
（侧轴没有两端对齐和环绕对齐，但有基线对齐和拉伸对齐）
4.align-items:base-line： 基线对齐，让所有伸缩项中的基线都移动到在一条直线上对齐；
（基线：一行文字中最短的那个底部为基线。下图的基线就在数字1234下，所以会对齐1234）
5.align-items:stretch：拉伸对齐（等高对齐），让所有的伸缩项高度变为侧轴高度； 但如果设置了伸缩项高度，拉伸对齐会失效；
**align-items：**是一次性控制所有的伸缩项在侧轴上的对齐方式，并需要写到伸缩容器中去
align-self： 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 ，
单独控制某一个伸缩项在侧轴上的对齐方式，并需要写到对应的那个伸缩项中
（两者的取值是一样的，只是控制的作用范围和书写的位置不一样；）
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
//表示只控制.item这一项的对齐方式
}
过渡
过渡三要素：
1.必须告诉系统哪个属性需要执行过渡效果；
2.必须告诉系统过渡的持续时间；
3.必须要有属性发生变化；
过渡的四个属性：
1.transition-property: width,background-color; /*过渡性质
2.transition-duration: 5s,3s; /*过渡时间
3.transition-timing-function: linear; /*过渡速度
4.transition-delay: 1s; /*过渡延时
div{
width: 100px;
height: 200px;
background-color: red;
transition-property: width,background-color; /*过渡性质：说明哪个属性需要过渡的动画效果*/
transition-duration: 5s,3s; /*过渡时间：说明过渡的时长*/
transition-timing-function: linear; /*过渡速度：告诉系统物体变化速度*/
transition-delay: 1s; /*过渡延时：告诉系统延迟多少秒后再变化*/
/*
linear； 匀速
ease； 逐渐变慢
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
steps*/
/*
注意：
当设置多个相同属性不同的值时，不用重复写属性名，因为下层属性名称会
覆盖上层的属性，使上层无效
故，只需要在属性值的后面添加逗号,再直接添加属性值即可；
过渡简写：
transition；all 5s;（all指上面的所有属性width和background-color，
变成下面hover后的width和background-color持续时间都是5秒）
动画(animation)
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面 构成动画的最小单元：帧或动画帧
动画执行三要素：
1.执行的动画名称animation-name
2.执行的动画持续时间animation-duration
3.创建自定义名称的动画 @keyframes 动画名称{}
1，定义动画
方法1
aaa为创建的动画名称
@keyframes aaa {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
方法2
bbb为创建的动画名称
@keyframes bbb {
0%{
transform: rotate(30deg);
}
50%{
transform: rotate(90deg);
}
100%{
transform: rotate(210deg);
}
2，使用动画
div.nav{
width: 200px;
height: 100px;
background-color: red;
animation-name: aaa; /*1.告诉系统需要执行哪个动画*/
animation-duration: 3s; /*2.告诉系统动画持续时间*/
animation-timing-function: linear;/*3.告诉系统动画的速度变化*/
animation-delay: 1s; /*4.告诉系统延迟多少秒后开始动画*/
animation-iteration-count: 3; /*5.执行的次数,infinite无限循环*/
animation-direction: alternate; /*6.是否往返，normal默认值，alternate往返 reverse 先反再反 alternate-reverse先反再正
/*
动画模块连写：
animation：动画名称 动画时长 运动速度 延迟时间 执行次数 往返；
动画模块简写：
animation：动画名称 动画时长（最少这两个属性）
*/
}
div.nav:hover{
补充：
1， /* animation-play-state: paused; */
告诉系统动画是否需要暂停，running默认值,paused暂停
在这里只要把鼠标放在div上，动画暂停
}
2， /*animation-timing-function：steps(N) 逐帧动画：帧动画。*/
开发中，一般配合精灵图实现动画效果，将动画过程等分成N份。
精灵图动画制作步骤：
1.准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
2.定义动画
改变背景图的位置（移动的距离就是精灵图的宽度）
3.使用动画
添加速度曲线steps(N)，N与精灵图上小图个数相同
4.添加无限重复效果
5.如果想让小人跑远一些，该如何实现？
精灵动画的同时添加盒子位移动画。
animation: move 1s steps(12) infinite, translate 3s linear forwards;
（animation里面添加两个动画效果，动画名称之间用逗号隔开）
3，/* animation-fill-mode作用：*/
指定动画等待状态和结束状态的样式；
（ 动画是有一定的状态的，分为三种: 1.等待状态 2.执行状态 3.结束状态）
取值：
none； 不作任何改变；
forward； 让元素结束的时候显示最后一帧的样式；
backward； 让元素等待的时候显示第一帧的样式；
both； 让元素等待显示动画第一帧，结束时显示最后一帧；
补充注意： 动画名称和动画时长必须赋值; 取值不分先后顺序; 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间;
3，过渡和动画
(transition)(animation)
不同点：
A
过渡:必须人为触发才会执行动画；
动画:不需要人为干预，看着就会自动执行；
B
过渡：实现2个状态间的变化过程；
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）;
C
相同点： 过渡和动画都是用来给元素添加动画的； 过渡和动画都是系统新增的属性； 过渡和动画都需要满足三要素才会有动画效果； 1.告诉系统需要执行哪个动画; 2.告诉系统我们需要创建一个的动画名称； 3.告诉系统动画持续时间
用steps实现逐帧动画
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function: steps(N)；
将动画过程等分成N份
