本文主要是介绍flex布局方式，模仿新氧局部，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--完美视口设定--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}/*设置htmlfont-size的大小，则rem就可以派上用场假如：设计图是750px大小的要充满整个可视区域也就是100vw那么1px = 0.1333333333333333vw*/html{/*如果这个设置的话，理论上是可行的但是浏览器默然是字体最小是12px*/ /* font-size:0.1333333333333333vw;*//*扩大40倍相当于40px*/font-size:5.3333333vw}header{padding: 10px ;border-bottom: 0.5px solid #DADADA}.top{/*vw指的视口大小当值是100vw的时候不同的手机代表着宽度是100%*//*上面的设置是1rem = 40px 如果我想屏幕正好视频可以区域750/40*/width: 17.45rem;display: flex;margin: auto;justify-content:space-between;align-items: center;}.top-left{width:8.3rem;height:2.05rem;}.top-right{width: 3.7rem;height: 1.35rem;}.search{width: 17.45rem;margin: auto;display:flex;font-size: 0.75rem;justify-content: space-between;align-items: center;padding: 10px;}.chnose-city{border-color: black #fff #fff #fff;border-style: solid;border-width: 0.25rem 0.15rem 0 0.15rem;height: 0;width: 0;}.city{width: 2.3rem;height: 1.6rem;line-height: 1.6rem;}.search-content{width: 11.8rem;height: 1.625rem;line-height: 1.625rem;font-size:0.28rem;color: #AAABB3;border-radius: 2rem;background: #F5F5F5;justify-content: space-between;}.face{width: 1.5rem;height: 1.5rem;}.search-content span{padding-left:1.3rem;}.banner{display: block;width:17.25rem;margin: auto;height: 6rem;border-radius: 0.16rem;}.item{display: flex;width: 17.25rem;margin: auto;padding-top: 10px;}.item a{width:3.45rem;text-align: center;font-size: 0.65rem;text-decoration: none;color:#666;}.item a img{display: block;width: 2rem;height: 2rem;margin: auto;}</style>
</head>
<body><header><div class="top"><img class="top-left" src="https://static.soyoung.com/sy-pre/logo-new-1589358121653.png"><img class="top-right" src="https://static.soyoung.com/sy-pre/openapp@3x-1589358121653.png"></div></header><div class="search"><div class="city">北京市</div><div class="chnose-city"></div><div class="search-content"><a></a><span>瘦脸针</span></div><img src="https://mstatic.soyoung.com/m/static/fe_m/view/home/img/login-713931fb83.png" class="face"></div><img class="banner" src="https://img2.soyoung.com/upload/20200420/3/aadfda439d923186151a86893b8e560f.jpg"/><section><div class="item"><a href="#"><img src="https://img2.soyoung.com/origin/20220225/0/c0a5d61880cf7f8c534af74914dfadf2.png"><span>脂肪填充</span></a><a href="#"><img src="https://img2.soyoung.com/origin/20220225/4/1e28c875b5379c812569878fb6a2197f.png"><span>口腔齿科</span></a><a href="#"><img src="https://img2.soyoung.com/origin/20220225/3/68027ab72e328463546a404d62066daf.png"><span>胸部</span></a><a href="#"><img src="https://img2.soyoung.com/origin/20220225/1/221845fba3a8218d7aaac1137b877291.png"><span>美体塑形</span></a><a href="#"><img src="https://img2.soyoung.com/origin/20220225/7/7b8105b39294bef14b963f1b77c1cf39.png"><span>鼻部</span></a> </div><div class="item"><a href="#"><img src="https://img2.soyoung.com/origin/20220225/0/c0a5d61880cf7f8c534af74914dfadf2.png"><span>面部轮廓</span></a><a href="#"><img src="https://img2.soyoung.com/origin/20220225/0/c0a5d61880cf7f8c534af74914dfadf2.png"><span>玻尿酸</span></a><a href="#"><img src="https://img2.soyoung.com/origin/20220225/0/c0a5d61880cf7f8c534af74914dfadf2.png"><span>除皱脸</span></a><a href="#"><img src="https://img2.soyoung.com/origin/20220225/0/c0a5d61880cf7f8c534af74914dfadf2.png"><span>眼部</span></a><a href="#"><img src="https://img2.soyoung.com/origin/20220225/0/c0a5d61880cf7f8c534af74914dfadf2.png"><span>鼻部</span></a> </div></section>
</body>
</html>
这篇关于flex布局方式，模仿新氧局部的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
