search

博客列表 >前端Flex实现的PC端布局和移动端布局的基本方案

前端Flex实现的PC端布局和移动端布局的基本方案

emagic
emagic原创
2020年06月27日 21:05:52954浏览

0623作业

一、 Flex的PC端布局方案

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Flex的PC端布局方案</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  15.       a {
  16.         /* 常规操作是去掉a标签的下划线，然后改一下字体颜色 */
  17.         text-decoration: none;
  18.         color: #555;
  19.       }
  20.       body {
  21.         /* 将body转为flex */
  22.         display: flex;
  23.         min-width: 480px;
  24.         /* 设置主轴垂直 ,不换行*/
  25.         flex-flow: column nowrap;
  26.       }
  28.       header,
  29.       footer {
  30.         height: 50px;
  31.         border: 1px solid #000;
  32.       }
  34.       /* 将页眉转为盒子 */
  35.       nav {
  36.         display: flex;
  37.         background-color: skyblue;
  38.         /* 让所有项目在j交叉轴方向（垂直轴)方向居中显示 */
  39.         align-items: center;
  40.       }
  42.       nav a {
  43.         flex: 0 1 100px;
  44.         /* 文本居中 */
  45.         text-align: center;
  46.       }
  48.       /* 设置logo的边距 */
  49.       nav a:first-of-type {
  50.         margin-right: 60px;
  51.       }
  53.       nav a:last-of-type {
  54.         margin-left: auto;
  55.       }
  57.       nav a:not(:first-of-type):hover {
  58.         /* 导航文字悬停效果,logo无需变色 */
  59.         color: white;
  60.       }
  62.       .container {
  63.         display: flex;
  64.         min-height: 500px;
  65.         margin: 10px auto;
  66.         justify-content: center;
  67.       }
  69.       .container > section,
  70.       .container > main {
  71.         border: 1px solid #000;
  72.         padding: 10px;
  73.       }
  74.       .container > section {
  75.         flex: 0 0 200px;
  76.       }
  78.       .container > main {
  79.         flex: 0 0 400px;
  80.         margin: 0 10px;
  81.       }
  83.       footer {
  84.         display: flex;
  85.         flex-flow: column nowrap;
  86.         text-align: center;
  87.       }
  88.     </style>
  89.   </head>
  90.   <body>
  91.     <!-- 页眉 -->
  92.     <header>
  93.       <nav>
  94.         <a href="">LOGO MY HOUSE</a>
  95.         <a href="">首页</a>
  96.         <a href="">客厅玄关</a>
  97.         <a href="">卫生间</a>
  98.         <a href="">卧室布局</a>
  99.         <a href="">厨房空间</a>
  100.         <a href="">购物车</a>
  101.         <a href="">注册/登录</a>
  102.       </nav>
  103.     </header>
  104.     <!-- 主体 -->
  105.     <div class="container">
  106.       <!-- 左边栏 -->
  107.       <section>左边商品分类栏</section>
  108.       <!-- 主体内容区 -->
  109.       <main>主体内容区</main>
  110.       <!-- 右边栏 -->
  111.       <section>右边广告投放栏</section>
  112.     </div>
  113.     <!-- 页脚 -->
  114.     <footer>
  115.       <p>
  116.         Emagic社区论坛 © 版权所有   （2020）| 备案号：
  117.         <a href="">粤IPC-20xxxxxxxx</a>
  118.       </p>
  119.       <p>中国 广东佛山市南海区999号|电话：0757-123456789</p>
  120.     </footer>
  121.   </body>
  122. </html>

二、 移动端的布局方案， 试着将下面的产品展示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex弹性盒子实现移动端的布局</title>
  7.     <link rel="stylesheet" href="static/css/iconfont.css" />
  8.     <link rel="stylesheet" href="static/css/mobliestyle.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 页眉 -->
  12.     <header>
  13.       <!-- logo一般放在一个链接里面 -->
  14.       <a href="">LOGO</a>
  15.       <!-- 阿里字体图标引用后，用一个class="iconfont"以16进制字体样式使用 -->
  16.       <span class="iconfont">&#xe6e9;</span>
  17.     </header>
  19.     <!-- 轮播图 -->
  20.     <div class="slider">
  21.       <img src="static/image/banner.jpg" alt="" />
  22.     </div>
  24.     <!-- 主导航 -->
  25.     <nav>
  26.       <div>
  27.         <!-- 注意，图片是可以点击的，所以要放到a标签里面去 -->
  28.         <a href=""><img src="static/image/img1.png" alt="" /></a>
  29.         <a href="">特优超市</a>
  30.       </div>
  31.       <div>
  32.         <a href=""><img src="static/image/img2.png" alt="" /></a>
  33.         <a href="">数码商城</a>
  34.       </div>
  35.       <div>
  36.         <a href=""><img src="static/image/img3.png" alt="" /></a>
  37.         <a href="">时尚服饰</a>
  38.       </div>
  39.       <div>
  40.         <a href=""><img src="static/image/img4.png" alt="" /></a>
  41.         <a href="">生鲜超市</a>
  42.       </div>
  43.       <div>
  44.         <a href=""><img src="static/image/img5.png" alt="" /></a>
  45.         <a href="">送货配送</a>
  46.       </div>
  47.       <div>
  48.         <a href=""><img src="static/image/img6.png" alt="" /></a>
  49.         <a href="">会员充值</a>
  50.       </div>
  51.       <div>
  52.         <a href=""><img src="static/image/img7.png" alt="" /></a>
  53.         <a href="">品牌闪购</a>
  54.       </div>
  55.       <div>
  56.         <a href=""><img src="static/image/img8.png" alt="" /></a>
  57.         <a href="">优惠券</a>
  58.       </div>
  59.       <div>
  60.         <a href=""><img src="static/image/img9.png" alt="" /></a>
  61.         <a href="">VIP会员</a>
  62.       </div>
  63.       <div>
  64.         <a href=""><img src="static/image/img10.png" alt="" /></a>
  65.         <a href="">生鲜超市</a>
  66.       </div>
  67.     </nav>
  68.     <!-- 热销商品 -->
  69.     <h2>
  70.       热销商品
  71.       <span class="iconfont hotboom" style="color: tomato;">&#xe54c;</span>
  72.     </h2>
  73.     <div class="hot-goods">
  74.       <div class="goods-img">
  75.         <a href=""><img src="static/image/i1.jpg" alt="" /></a>
  76.         <p>华为Nova6 5G手机</p>
  77.         <div>
  78.           <span>2388&nbsp;元</span>
  79.           <span class="iconfont" style="color: red;">&#xe50b;</span>
  80.         </div>
  81.       </div>
  82.       <div class="goods-img">
  83.         <a href=""><img src="static/image/i2.jpg" alt="" /></a>
  84.         <p>华为笔记本电脑i7独显</p>
  85.         <div>
  86.           <span>6699&nbsp;元</span>
  87.           <span class="iconfont" style="color: red;">&#xe50b;</span>
  88.         </div>
  89.       </div>
  90.       <div class="goods-img">
  91.         <a href=""><img src="static/image/i3.jpg" alt="" /></a>
  92.         <p>B&O 蓝牙便携音响A2</p>
  93.         <div>
  94.           <span>998&nbsp;元</span>
  95.           <span class="iconfont" style="color: red;">&#xe50b;</span>
  96.         </div>
  97.       </div>
  98.       <div class="goods-img">
  99.         <a href=""><img src="static/image/i4.jpg" alt="" /></a>
  100.         <p>云端摄像头</p>
  101.         <div>
  102.           <span>158&nbsp;元</span>
  103.           <span class="iconfont" style="color: red;">&#xe50b;</span>
  104.         </div>
  105.       </div>
  106.       <div class="goods-img">
  107.         <a href=""><img src="static/image/i5.jpg" alt="" /></a>
  108.         <p>电脑扩展接口，支持多种转换</p>
  109.         <div>
  110.           <span>88&nbsp;元</span>
  111.           <span class="iconfont" style="color: red;">&#xe50b;</span>
  112.         </div>
  113.       </div>
  114.       <div class="goods-img">
  115.         <a href=""><img src="static/image/i6.jpg" alt="" /></a>
  116.         <p>国家地理画册，科普图书优惠</p>
  117.         <div>
  118.           <span>138&nbsp;元</span>
  119.           <span class="iconfont" style="color: red;">&#xe50b;</span>
  120.         </div>
  121.       </div>
  122.     </div>
  123.     <!-- 商品列表区 -->
  124.     <h2>
  125.       商品列表
  126.       <span class="iconfont" style="color: tomato;">&#xe788;</span>
  127.     </h2>
  128.     <div class="list-goods">
  129.       <div class="goods-desc">
  130.         <a href=""><img src="static/image/goods4.jpg" alt="" /></a>
  131.         <a href=""
  132.           >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  133.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  134.           以上都是我瞎编的<span
  135.             class="iconfont hotboom"
  136.             style="vertical-align: middle;"
  137.             >&#xe50b;</span
  138.           ></a
  139.         >
  140.       </div>
  141.       <div class="goods-desc">
  142.         <a href=""><img src="static/image/goods3.jpg" alt="" /></a>
  143.         <a href=""
  144.           >[白条24期免息]Apple洗衣机,专业清洗苹果手机,
  145.           苹果电脑,iPad,洗好保证不能用, 免费领取500元保险费,
  146.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  147.           以上都是我瞎编的<span
  148.             class="iconfont hotboom"
  149.             style="vertical-align: middle;"
  150.             >&#xe50b;</span
  151.           ></a
  152.         >
  153.       </div>
  154.       <div class="goods-desc">
  155.         <a href=""><img src="static/image/goods5.png" alt="" /></a>
  156.         <a href=""
  157.           >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  158.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  159.           以上都是我瞎编的<span
  160.             class="iconfont hotboom"
  161.             style="vertical-align: middle;"
  162.             >&#xe50b;</span
  163.           ></a
  164.         >
  165.       </div>
  166.       <div class="goods-desc">
  167.         <a href=""><img src="static/image/goods2.jpg" alt="" /></a>
  168.         <a href=""
  169.           >[白条24期免息]华为笔记本MateBook 14 全面屏轻薄性能笔记本电脑
  170.           十代酷睿(i5 16G 512G MX250 触控屏 多屏协同)灰, 以上都是我瞎编的<span
  171.             class="iconfont hotboom"
  172.             style="vertical-align: middle;"
  173.             >&#xe50b;</span
  174.           ></a
  175.         >
  176.       </div>
  177.     </div>
  178.     <footer>
  179.       <a href="">
  180.         <!-- 因为图片是可以点进去的，所以要放入a标签内 -->
  181.         <span class="iconfont hotboom">&#xe687;</span>
  182.         <span>首页</span>
  183.       </a>
  184.       <a href="">
  185.         <span class="iconfont hotboom">&#xe511;</span>
  186.         <span>分类</span>
  187.       </a>
  188.       <a href="">
  189.         <span class="iconfont hotboom">&#xe627;</span>
  190.         <span>购物车</span>
  191.       </a>
  192.       <a href="">
  193.         <span class="iconfont hotboom">&#xe501;</span>
  194.         <span>抽奖</span>
  195.       </a>
  196.       <a href="">
  197.         <span class="iconfont hotboom">&#xe628;</span>
  198.         <span>登录</span>
  199.       </a>
  200.     </footer>
  201.   </body>
  202. </html>
  1. /* 样式初始化三板斧 */
  2. * {
  3.   padding: 0;
  4.   margin: 0;
  5.   box-sizing: border-box;
  6. }
  8. /* a链接初始化双雄 */
  9. a {
  10.   text-decoration: none;
  11.   color: #666;
  12. }
  13. /* html中要设置宽度自适应视口 */
  14. html {
  15.   /* vw：可视区宽度，100指的是100份 ，vh是可视区的高度*/
  16.   width: 100vw;
  17.   height: 100vh;
  18.   font-size: 15px;
  19.   color: #666;
  20. }
  22. body {
  23.   display: flex;
  24.   flex-flow: column nowrap;
  25.   background-color: white;
  26.   min-width: 360px;
  27. }
  29. body > header {
  30.   /* 文本设置为白色 */
  31.   color: white;
  32.   background-color: #333;
  33.   height: 30px;
  34.   display: flex;
  35.   align-items: center;
  36.   justify-content: space-between;
  38.   /* 头部滚动条滚动的时候不要动 */
  39.   position: fixed;
  40.   /* 注意，固定定位后会缩回去，所以要设置一下宽度 */
  41.   width: 100vw;
  42.   padding: 0 15px;
  43. }
  45. body > .slider {
  46.   height: 180px;
  47. }
  49. body > .slider > img {
  50.   width: 100%;
  51. }
  53. /* 主导航区 */
  54. nav {
  55.   height: 200px;
  56.   margin-bottom: 10px;
  58.   display: flex;
  59.   /* 允许换行，转为多行容器 */
  60.   flex-flow: row wrap;
  61.   align-content: space-evently;
  62. }
  64. nav div {
  65.   /* 每排5个，一个就是20% */
  66.   width: 20vw;
  67.   display: flex;
  68.   flex-flow: column nowrap;
  69.   align-items: center;
  70. }
  72. /* 图片是第一个a标签 */
  73. nav > div > a:first-of-type {
  74.   text-align: center;
  75. }
  77. nav > div img {
  78.   width: 50%;
  79. }
  81. /* 每个区域的标题样式 */
  82. .title {
  83.   margin-top: 10px;
  84.   font-size: 1.2rem;
  85.   font-weight: normal;
  86.   text-align: center;
  87. }
  89. /* 热销商品区 */
  90. .hot-goods {
  91.   border-top: 1px solid #cdcdcd;
  92.   margin-top: 10px;
  93.   font-size: 0.8rem;
  94.   display: flex;
  95.   /* 水平多行容器 */
  96.   flex-flow: row wrap;
  97. }
  99. .hot-goods img {
  100.   width: 100%;
  101. }
  103. .hot-goods > .goods-img {
  104.   /* 内边距并重置大小 */
  105.   padding: 10px;
  106.   box-sizing: border-box;
  107.   /* 允许放大不允许缩小,否则项目不会换行,多行容器失效 */
  108.   flex: 1 0 30vw;
  109.   /* 一行三个，所以是30vw */
  111.   /* 再将每个商品描述转为flex */
  112.   display: flex;
  113.   /* 主轴垂直且不允许换行 */
  114.   flex-flow: column nowrap;
  115.   justify-content: center;
  116. }
  118. /* 商品描述的最后一个区域转flex,并设置项目在主轴上排列对齐方式 */
  119. .hot-goods > .goods-img > div {
  120.   display: flex;
  121.   /* 分散对齐 */
  122.   justify-content: space-around;
  123. }
  125. /* 热销样式 */
  126. .hotboom {
  127.   color: coral;
  128. }
  130. /* 商品列表区 */
  131. .list-goods {
  132.   padding: 10px;
  133.   border-top: 1px solid #cdcdcd;
  134.   margin-top: 10px;
  135.   font-size: 0.8rem;
  136.   display: flex;
  137.   /* 主轴是垂直的，上面是图片，下面是介绍 */
  138.   flex-flow: column nowrap;
  139. }
  140. /* 每个项目也转为flex */
  141. .list-goods > .goods-desc {
  142.   margin: 10px 0;
  143.   display: flex;
  144. }
  145. /* 列表中每个项目的样式,加些间距 */
  146. .list-goods > .goods-desc > a {
  147.   padding: 10px;
  148.   box-sizing: border-box;
  149. }
  150. .list-goods > .goods-desc > a:last-of-type:hover {
  151.   color: lightseagreen;
  152. }
  153. /* 图片全部适应项目空间 */
  154. .list-goods img {
  155.   width: 100%;
  156. }
  157. body > footer {
  158.   color: #666;
  159.   background-color: #efefef;
  160.   border-top: 1px solid #ccc;
  161.   height: 55px;
  162.   /* 页脚要固定显示，否则滚动下来就不见了 */
  163.   position: fixed;
  164.   bottom: 0;
  165.   width: 100vw;
  167.   display: flex;
  168.   justify-content: space-around;
  169.   /* 这里用space-evently也行 */
  170. }
  172. body > footer a {
  173.   margin-top: 10px;
  174.   /* font-size: 0.8rem; */
  175.   display: flex;
  176.   /* 垂直排列不换行 */
  177.   flex-flow: column nowrap;
  178.   /* 交叉轴项目居中显示 */
  179.   align-items: center;
  180. }
  181. body > footer a > span:first-of-type {
  182.   font-size: 1.6rem;
  183. }

小结：

将要布局的内容转换为盒子，盒子里面的项目也可以转变为子盒子，关键点在于：

1.主轴方向flex-direction是垂直（column）还是水平（row）。

2.盒子中的项目是否换行（wrap/nowrap），根据需要灵活变换。

  • justify-content  主轴单行
  • align-content    主轴多行
  • align-items        交叉轴
上一条：PC 端布局与移动端布局下一条：弹性盒模型（flexbox）布局初体验
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多