弹性布局
1.当子元素在主轴方向的长度和大于父元素的情况
子元素在父元素中放不下是否换行？
flex-warp：
默认值： nowrap 不换行，压缩子元素的长度，最常用
可选值： wrap 换行
当子元素被压缩时，设置压缩比率
flex-shrink:
默认值：1 可以压缩
可选值：0 不可压缩
其余任意正整数数字，都表示可以压缩
当子元素可以压缩时（属性值设置也大于0的整数），只要数字相等，那么所有元素都会等比例压缩，如果不相等，数字越大，压缩越狠。
.d1{
flex-shrink: 1;
}
.d2{
flex-shrink: 2;
}
.d3{
flex-shrink: 3;
}
.d4{
flex-shrink: 4;
}
.d5{
flex-shrink: 5;
}
2.子元素放大
父元素的长度大于子元素的长度和，处理方式有两种
（1）设置子元素的对齐方式
（2）让子元素扩大，把父元素宽度占满
设置子元素的扩大比率：
flex-grow
** 默认值：** 0 不扩大
可选值：任意大于0的整数
只要数值相等就会等比例扩大，如果数值不相等，数值越大，则扩大的越大。
开发中，会把父元素中所占长度最大的子元素设置成可扩大
.d1,.d2,.d4{
flex-grow: 1;
}
.d3,.d5{
flex-grow: 2;
}
过渡
让样式在一定时间内没变化成另一个属性值
注：国服必须设置一个触发点，常见的hover伪类。当鼠标移入标签范围开始过渡，伪类对应的是变化后的样式
在一般样式中设置过渡前的样式
设置需要过渡的样式
transition-property:
默认值：
all 所有可过渡的样式都会参与过渡
设置过渡需要的时间：
transition-duration:
默认值 0s
可选值 数值+s 注：单位必须写
设置过渡变化的速率
transition-timing-funcing:
默认值 ease 开始变化慢，中间快速变化，结尾变化快
可选值 linear 元素变化
设置过渡的延时时间
div{
width: 100px;
height: 100px;
background-color: red;
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 1s;
}
div:hover{
background-color: #00cc4c;
height: 30px;
}
此例中，参与过渡的属性只有背景颜色，会在1s内从红色变成绿色，当鼠标1s后开始过渡，过渡时样式匀速变化。而高度没有参与过渡的设置，都是用默认值；在鼠标移入时瞬间变化。
过渡简写：
transition:过渡样式 过渡时间 延时时间 过渡变化速率
以上四个属性值，只有过渡时间是必须填写，其余都可省略。但是如果写多个就必须按顺序
最简写法：
transition:过渡时间
多套过渡同时设置
transition: all 2s,background-color 2s 0.5s;
可以参与过渡的样式：尺寸类，颜色类，内外边距，边框，背景类，定位，变换
变换
注：变换设置的是变换后的结果，一般与过渡和动画等配合使用
1.位移变化
transform：
translateX(30px) 水平向右移动30px
translateX(-10px) 水平向左移动10px
translateX(20%）水平移动自身宽度的20%
div{
width: 100px;
height: 100px;
background-color: red;
transform: translateX(50%);
}
div水平移动50px
同理，存在translateY()竖直移动规律同水平移动
transform: translate(10px,-20%);
translate（值1，值2）值1是水平移动，值2时竖直移动
注：如果translate中只提供一个值，则是水平移动的值
