Flex布局复习

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)

}