display: -webkit-flex;
    /* Safari */
    -webkit-flex-direction: row-reverse;
    /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
左右

3.上下位置互换（当一排多个内容时  可通过order调整子类位置）

order: -1;

4.小三角形

span {
0;
height:0;
overflow:hidden;
border:7px solid transparent;
border-top-color:#2DCB70;//top就是倒三角，bottom就是上三角，left,right类似
}

5.鼠标移入图片放大

div{ 300px; height: 300px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; }

div img{

cursor: pointer; 

transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;

}

div img:hover{

transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);

} 

6.背景上盖一层阴影

 background: rgba(0, 0, 0, .3) url(../image/ban_l.png) no-repeat center;

7.水平、垂直居中+换行（加在父级上）

display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;

7_1.两边对齐

8.设置文本框内提示文字

   /* 谷歌 */

input::-webkit-input-placeholder{
color:red;
font-size:20px;
}

input::placeholder{
color:red;
font-size:20px;
}

 绝对定位居中

 .conter{

     600px; height: 400px;

    position: absolute; left: 50%; top: 50%;

    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */

}

 反转div

 文字间隔

-webkit-transform:translateY(-20px);
-moz-transform:translateY(-20px);
-ms-transform:translateY(-20px);
-o-transform:translateY(-20px);
transform:translateY(-20px)

手风琴效果

点击下拉效果