Flex-direction:row/column
Flex-wrap:wrap
側軸方向的子元素排列方式（單行情況下）：
Align-item：flex-satrt/flex-end/center
側軸方向的子元素排列方式（多行情況下）隻有在父級元素上設定了flex-wrap:wrap才可使用：
Align-content:flex-start/flex-end/center/space-around/space-bettew
（4）flex-flow:flex-direction+flex-wrap的和寫
Flex屬性定義子項目的剩餘空間，flex:number表示占多少份數（就是從剩餘空間配置設定份數）
子項目的這兩個屬性了解就好
在css中nth-child(n)中的n是從1開始
子項目的order是設定單獨的排列順序，例如将第二個盒子提到第一個盒子的前面，可以設定order：-1，-1比0小
Flex布局案例
（1） position:fixed固定的盒子應該有寬度，width:100%或者width:~px
（2） 有定位了之後margin：0 auto就會失效
（3） 讓盒子居中對齊：方法1：position：absolute left:50%+margin-left(盒子寬度的一半)；方法二：left:50%+transform:translateX(-50%)
（4） 京東的做法是不給left值的話也會居中對齊
–>攜程網案例
我的 .search-index{ Display:flex Position:relative } .search{ flex:1 } //這裡不能用display:block 因為會把放大鏡的文字擠下去，是以改用position：absolute .search::before{ Position:position top:0 left:0 } a::before{ content:””, display:block } 這裡會使用到精靈圖，現将精靈圖放大兩倍，然後得到所需圖的大小，也得到所需圖的坐标，最後background-size=”原圖大小” 
給這個小圖示快速換圖
這個是給所有a設定樣式
給後面的小圖示換坐标（隻是背景圖不一樣而已）
Nav部分
Nav { Border-radius:8px Overflow:hidden//加這個的原因是因為給讓邊角顯示出來 } Box-shadow:1.水準陰影（正值：在對象的右邊，負值：在對象的左邊）2.垂直陰影（正值：在對象的底部，負值：在對象的頂部）3.陰影模糊半徑4.陰影顔色（rgba(0,0,0,.2)透明度） Background:-webkit-linear-gradient(left，red blue )    
熱門活動這塊
手寫三角這塊
.more::after {
Content:””,
Position:absolute,
Width:7px
Height:7px
Top:0
Right:20px
Border-top:2px solid #fff
Border-right:2px solid #fff
Transform:rotate(45deg)
}