弹性布局

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中只提供一个值，则是水平移动的值