![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/52d2828e2eff46e747364728367dd092.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7b32faaf2a02235d022d78120dc91906.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/456e4819e6575a5acc7830573d43e791.png#pic_center)
Flex-direction:row/column
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/49e570546c57ee07a473b90147512c54.png#pic_center)
Flex-wrap:wrap
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8e7d2ff9c67753434f4b42dfd0108b76.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/64ca5bcc8ae33d6934dd4931ef7b6ca2.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/074106b238f0f094d2e5b6e2577992c7.png#pic_center)
侧轴方向的子元素排列方式(单行情况下):
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的和写
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0cdff85d5ae25114f4603f3ad93f55af.png#pic_center)
Flex属性定义子项目的剩余空间,flex:number表示占多少份数(就是从剩余空间分配份数)
子项目的这两个属性了解就好
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f90ee567c7d3deeec286bf8ae9d3c44e.png#pic_center)
在css中nth-child(n)中的n是从1开始 ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5616fe230d83a276f8bba4422b26f842.png#pic_center)
子项目的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值的话也会居中对齐
–>携程网案例
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6a6923f52fd752b6024c2aa465ba9b90.png#pic_center)
.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=”原图大小” ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200926212831956.png#pic_center)
给这个小图标快速换图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9aa20f7afb06d4bdcbabc6357b9d2669.png#pic_center)
这个是给所有a设置样式
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1e03a8b3963780b5bc1814378f0f8a18.png#pic_center)
给后面的小图标换坐标(只是背景图不一样而已)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6c5cc1e86ed613bca8da054ad83ad9b9.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0c2825fb2cd1fea24bbe19729b79803d.png#pic_center)
Nav部分
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/af87c55631a296857154d1eefc5bcd51.png#pic_center)
Nav { Border-radius:8px Overflow:hidden//加这个的原因是因为给让边角显示出来 } Box-shadow:1.水平阴影(正值:在对象的右边,负值:在对象的左边)2.垂直阴影(正值:在对象的底部,负值:在对象的顶部)3.阴影模糊半径4.阴影颜色(rgba(0,0,0,.2)透明度) Background:-webkit-linear-gradient(left,red blue ) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200926213115145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3NzAxNzIz,size_16,color_FFFFFF,t_70#pic_center) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200926213122536.png#pic_center) ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020092621324489.png#pic_center) ![](https://img-blog.csdnimg.cn/20200926213228458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3NzAxNzIz,size_16,color_FFFFFF,t_70#pic_center)
热门活动这块
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/642cb87d229a695ff20614323d78997c.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/520023cebe74ff04fc6d4f7d937e0ac9.png#pic_center)
手写三角这块
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f856322f492b1a32e06a890ec581e034.png#pic_center)
.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)
}