search

博客列表 >FlexBox对PC端和移动端的布局方案

FlexBox对PC端和移动端的布局方案

longlong
longlong原创
2020年06月24日 16:44:10987浏览

1. PC端布局方案

这里我运用Flex的知识做一个PC端的通用布局，适当加个导航条在顶部，布局样式如下：

代码如下：

  1. <style>
  2.     /* 初始化 */
  3.     * {
  4.       margin: 0;
  5.       padding: 0;
  6.       box-sizing: border-box;
  7.     }
  8.     /* 去掉a标签下划线，改变字体颜色 */
  9.     a {
  10.       text-decoration: none;
  11.       color: #666;
  12.     }
  13.     /* 把body转换为弹性容器，其项目向垂直方向排列，不换行 */
  14.     body {
  15.       display: flex;
  16.       flex-flow: column nowrap;
  17.     }
  18.     /* 头部转为弹性容器，默认水平排列，垂直居中 */
  19.     header {
  20.       height: 60px;
  21.       display: flex;
  22.       align-items: center;
  23.       padding: 0 20px;
  24.       border: 1px solid black;
  25.     }
  26.     /* 头部中的子元素设定基准宽度和高度，垂直居中 */
  27.     header > a {
  28.       flex: 0 0 100px;
  29.       text-align: center;
  30.       height: 60px;
  31.       line-height: 60px;
  32.     }
  33.     /* 把“登录/注册”放到最右边 */
  34.     header > a:last-of-type {
  35.       margin-left: auto;
  36.     }
  37.     /* LOGO不需要光标移入效果 */
  38.     header > a:not(:first-of-type):hover {
  39.       background-color: lightblue;
  40.       color: white;
  41.     }
  42.     /* 中间部分转为弹性容器，水平居中 */
  43.     .container {
  44.       display: flex;
  45.       margin: 10px auto;
  46.       justify-content: center;
  47.     }
  48.     /* 中间部分的子元素设定最小高度，撑开内容区 */
  49.     .container > * {
  50.       min-height: 500px;
  51.       padding: 1rem;
  52.       border: 1px solid black;
  53.     }
  54.     /* 侧边栏宽度 */
  55.     .container > aside {
  56.       flex: 0 0 200px;
  57.     }
  58.     /* 主体内容区宽度和左右外边距 */
  59.     .container > main {
  60.       flex: 0 0 580px;
  61.       margin: 0 10px;
  62.     }
  63.     /* 页脚转为弹性容器，垂直排列，内容居中 */
  64.     footer {
  65.       height: 80px;
  66.       border: 1px solid black;
  67.       display: flex;
  68.       flex-flow: column nowrap;
  69.       text-align: center;
  70.       justify-content: space-evenly;
  71.     }
  72.   </style>
  73.   <body>
  74.     <header>
  75.       <a href="">LOGO</a>
  76.       <a href="">首页</a>
  77.       <a href="">手机数码</a>
  78.       <a href="">家纺清洁</a>
  79.       <a href="">潮流服饰</a>
  80.       <a href="">灯饰</a>
  81.       <a href="">回收</a>
  82.       <a href="">登录/注册</a>
  83.     </header>
  84.     <div class="container">
  85.       <aside>左边栏</aside>
  86.       <main>主体内容区</main>
  87.       <aside>右边栏</aside>
  88.     </div>
  89.     <footer>
  90.       <p>
  91.         php中文网 &copy;版权所有 &nbsp;&nbsp;(2018-2022) | 备案号:
  92.         <a href="">皖ICP-18********</a>
  93.       </p>
  94.       <p>中国.合肥市政务新区999号 | 电话: 0551-888999**</p>
  95.     </footer>
  96.   </body>

效果如下：

  • 静态图：

  • 动态图：

根据自己的设计需求，侧边栏的宽度，高度可自己修改，也可以两列布局，减去其中一个aside即可。

2. 移动端布局方案

移动端布局，会有很多的轮播图，这里简单的借用一下swiper插件，实现轮播效果，还需要用到阿里字体图标，一定记得在html中引入相应的css文件和js文件。

HTML代码如下：

  1. <body>
  2.     <!-- 头部 -->
  3.     <header>
  4.       <a href="">
  5.         <span
  6.           class="iconfont icon-daohang"
  7.           style="color: white; font-size: 1.2rem;"
  8.         ></span>
  9.       </a>
  10.       <input type="search" placeholder="请输入您要搜索的内容" />
  11.       <a href="" style="color: white;">登录</a>
  12.     </header>
  13.     <!-- 轮播图，运用swiper插件 -->
  14.     <div class="swiper-container">
  15.       <div class="swiper-wrapper">
  16.         <div class="swiper-slide">
  17.           <img src="static/images/banner.jpg" alt="" />
  18.         </div>
  19.         <div class="swiper-slide">
  20.           <img src="static/images/banner.jpg" alt="" />
  21.         </div>
  22.         <div class="swiper-slide">
  23.           <img src="static/images/banner.jpg" alt="" />
  24.         </div>
  25.       </div>
  26.       <!-- 分页器 -->
  27.       <div class="swiper-pagination"></div>
  28.     </div>
  29.     <!-- 导航区 -->
  30.     <nav>
  31.       <div>
  32.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  33.         <a href="">京东超市</a>
  34.       </div>
  35.       <div>
  36.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  37.         <a href="">服装百货</a>
  38.       </div>
  39.       <div>
  40.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  41.         <a href="">数码电器</a>
  42.       </div>
  43.       <div>
  44.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  45.         <a href="">优惠券</a>
  46.       </div>
  47.       <div>
  48.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  49.         <a href="">京东超市</a>
  50.       </div>
  51.       <div>
  52.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  53.         <a href="">服装百货</a>
  54.       </div>
  55.       <div>
  56.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  57.         <a href="">数码电器</a>
  58.       </div>
  59.       <div>
  60.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  61.         <a href="">优惠券</a>
  62.       </div>
  63.     </nav>
  64.     <!-- 热销商品 -->
  65.     <div class="hot-goods-title">
  66.       <h2>热销商品</h2>
  67.       <span
  68.         class="iconfont icon-29_rexiao"
  69.         style="color: red; font-size: 2rem;"
  70.       ></span>
  71.     </div>
  72.     <div class="hot-goods">
  73.       <div class="goods-info">
  74.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  75.         <p>iphone x 128G</p>
  76.         <div>
  77.           <span>4399&nbsp;&nbsp;</span>
  78.           <span class="iconfont icon-tianchongxing-"></span>
  79.         </div>
  80.       </div>
  81.       <div class="goods-info">
  82.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  83.         <p>iphone x 128G</p>
  84.         <div>
  85.           <span>4399&nbsp;&nbsp;</span>
  86.           <span class="iconfont icon-tianchongxing-"></span>
  87.         </div>
  88.       </div>
  89.       <div class="goods-info">
  90.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  91.         <p>iphone x 128G</p>
  92.         <div>
  93.           <span>4399&nbsp;&nbsp;</span>
  94.           <span class="iconfont icon-tianchongxing-"></span>
  95.         </div>
  96.       </div>
  97.       <div class="goods-info">
  98.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  99.         <p>iphone x 128G</p>
  100.         <div>
  101.           <span>4399&nbsp;&nbsp;</span>
  102.           <span class="iconfont icon-tianchongxing-"></span>
  103.         </div>
  104.       </div>
  105.       <div class="goods-info">
  106.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  107.         <p>iphone x 128G</p>
  108.         <div>
  109.           <span>4399&nbsp;&nbsp;</span>
  110.           <span class="iconfont icon-tianchongxing-"></span>
  111.         </div>
  112.       </div>
  113.       <div class="goods-info">
  114.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  115.         <p>iphone x 128G</p>
  116.         <div>
  117.           <span>4399&nbsp;&nbsp;</span>
  118.           <span class="iconfont icon-tianchongxing-"></span>
  119.         </div>
  120.       </div>
  121.     </div>
  122.     <!-- 商品列表 -->
  123.     <div class="goods-list-title">
  124.       <h2>商品列表&nbsp;</h2>
  125.       <span
  126.         class="iconfont icon-shangpinliebiao"
  127.         style="color: lightcoral;"
  128.       ></span>
  129.     </div>
  130.     <div class="goods-list">
  131.       <div class="goods-list-info">
  132.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  133.         <a href=""
  134.           >商品具体信息商品具体信息商品具体信息商品具体信息商品具体信息</a
  135.         >
  136.         <span class="iconfont icon-ai-eye"></span>
  137.       </div>
  138.       <div class="goods-list-info">
  139.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  140.         <a href=""
  141.           >商品具体信息商品具体信息商品具体信息商品具体信息商品具体信息</a
  142.         >
  143.         <span class="iconfont icon-ai-eye"></span>
  144.       </div>
  145.       <div class="goods-list-info">
  146.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  147.         <a href=""
  148.           >商品具体信息商品具体信息商品具体信息商品具体信息商品具体信息</a
  149.         >
  150.         <span class="iconfont icon-ai-eye"></span>
  151.       </div>
  152.       <div class="goods-list-info">
  153.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  154.         <a href=""
  155.           >商品具体信息商品具体信息商品具体信息商品具体信息商品具体信息</a
  156.         >
  157.         <span class="iconfont icon-ai-eye"></span>
  158.       </div>
  159.       <div class="goods-list-info">
  160.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  161.         <a href=""
  162.           >商品具体信息商品具体信息商品具体信息商品具体信息商品具体信息</a
  163.         >
  164.         <span class="iconfont icon-ai-eye"></span>
  165.       </div>
  166.       <div class="goods-list-info">
  167.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  168.         <a href=""
  169.           >商品具体信息商品具体信息商品具体信息商品具体信息商品具体信息</a
  170.         >
  171.         <span class="iconfont icon-ai-eye"></span>
  172.       </div>
  173.     </div>
  174.     <!-- 底部 -->
  175.     <footer>
  176.       <div>
  177.         <a href="">
  178.           <span class="iconfont icon-shouye"></span>
  179.           <span>首页</span>
  180.         </a>
  181.       </div>
  182.       <div>
  183.         <a href="">
  184.           <span class="iconfont icon-shangpinfenlei"></span>
  185.           <span>分类</span>
  186.         </a>
  187.       </div>
  188.       <div>
  189.         <a href="">
  190.           <span class="iconfont icon-tianchongxing-"></span>
  191.           <span>购物车</span>
  192.         </a>
  193.       </div>
  194.       <div>
  195.         <a href="">
  196.           <span class="iconfont icon-denglu"></span>
  197.           <span>登录</span>
  198.         </a>
  199.       </div>
  200.     </footer>
  202.     <!-- 初始化swiper，轮播图效果立马呈现 -->
  203.     <script src="swiper/js/swiper.min.js"></script>
  204.     <script>
  205.       var mySwiper = new Swiper(".swiper-container", {
  206.         spaceBetween: 10,
  207.       });
  208.     </script>
  209.   </body>

CSS代码如下：

  1.   <style>
  2.     /* 初始化 */
  3.     * {
  4.       margin: 0;
  5.       padding: 0;
  6.       box-sizing: border-box;
  7.     }
  8.     /* 设置body最小宽度，保证像素适宜，且转为弹性容器 */
  9.     body {
  10.       min-width: 360px;
  11.       display: flex;
  12.       flex-flow: column nowrap;
  13.     }
  14.     /* 设置根元素默认字体，可视宽度和可视高度 */
  15.     :root {
  16.       font-size: 14px;
  17.       width: 100vw;
  18.       height: 100vh;
  19.     }
  20.     /* 去掉a标签的下划线，改变字体颜色 */
  21.     a {
  22.       text-decoration: none;
  23.       color: #666;
  24.     }
  25.     /*
  26.     1.头部设置宽、高、背景色
  27.     2.转为弹性盒，默认水平排列，并设置其对齐方式
  28.     3.设为固定定位，默认在最上面
  29.     4.这里我设置z-index是为了下滑时头部不会被轮播图覆盖
  30.     */
  31.     body > header {
  32.       height: 4vh;
  33.       width: 100vw;
  34.       background-color: rgb(235, 81, 81);
  35.       display: flex;
  36.       align-items: center;
  37.       justify-content: space-around;
  38.       position: fixed;
  39.       z-index: 2;
  40.     }
  41.     /* 头部中的输入框 */
  42.     body > header > input {
  43.       border-radius: 10px;
  44.       border: none;
  45.       padding: 2px 10px;
  46.     }
  47.     /* 轮播图中的图片覆盖整个容器 */
  48.     .swiper-slide > img {
  49.       width: 100%;
  50.       height: 100%;
  51.     }
  52.     /* 轮播图的宽高，必须设置，不设置的话轮播图无法全面覆盖 */
  53.     .swiper-container {
  54.       margin: auto;
  55.       margin-top: 4vh;
  56.       height: 20vh;
  57.       width: 100vw;
  58.     }
  59.     /* 导航区转为多行弹性盒 */
  60.     nav {
  61.       display: flex;
  62.       flex-flow: row wrap;
  63.       height: 25vh;
  64.       align-content: space-around;
  65.     }
  66.     /*
  67.     1.每个导航项目也转为弹性盒，垂直排列，使图片在上，文字在下，
  68.     2.宽度设为25%，就是占据导航区四分之一，一行即可显示四个导航项目
  69.     */
  70.     nav > div {
  71.       display: flex;
  72.       flex-flow: column nowrap;
  73.       align-items: center;
  74.       width: 25%;
  75.       text-align: center;
  76.     }
  77.     /* 图片按照原来的尺寸缩小一半 */
  78.     nav > div > a > img {
  79.       width: 50%;
  80.     }
  81.     /* 热销商品区的标题 */
  82.     .hot-goods-title {
  83.       display: flex;
  84.       align-items: center;
  85.       padding: 0 1rem;
  86.       color: rgb(121, 117, 117);
  87.     }
  88.     /* 热销商品区的子元素中的图片缩小一半 */
  89.     .goods-info img {
  90.       width: 50%;
  91.     }
  92.     /* 热销商品区转为多行弹性盒，并设置其项目的对齐方式 */
  93.     .hot-goods {
  94.       display: flex;
  95.       flex-flow: row wrap;
  96.       justify-content: space-around;
  97.       align-items: center;
  98.       margin-top: 15px;
  99.       padding: 15px 0;
  100.       border-top: 1px solid rgba(0, 0, 0, 0.2);
  101.     }
  102.     /* 每个热销项目也转为弹性盒，垂直排列，以显示商品信息和价格 */
  103.     .goods-info {
  104.       flex: 1 0 30vw;
  105.       display: flex;
  106.       flex-flow: column nowrap;
  107.       justify-content: center;
  108.       align-items: center;
  109.       text-align: center;
  110.       padding: 5px 0;
  111.       color: #666;
  112.     }
  113.     /* 热销商品下的购物车图标颜色 */
  114.     .icon-tianchongxing- {
  115.       color: lightcoral;
  116.     }
  117.     /* 商品列表区标题 */
  118.     .goods-list-title {
  119.       display: flex;
  120.       align-items: center;
  121.       color: rgb(121, 117, 117);
  122.       padding: 0 1rem;
  123.       justify-content: center;
  124.     }
  125.     /* 商品列表区转为多行弹性盒 */
  126.     .goods-list {
  127.       margin-top: 15px;
  128.       padding: 15px 0;
  129.       border-top: 1px solid rgba(0, 0, 0, 0.2);
  130.       display: flex;
  131.       flex-flow: row wrap;
  132.       justify-content: center;
  133.     }
  134.     /* 每个商品项目转为弹性盒，垂直排列 */
  135.     .goods-list-info {
  136.       display: flex;
  137.       flex-flow: column wrap;
  138.       align-items: center;
  139.       text-align: center;
  140.       padding: 10px;
  141.       font-size: 0.8rem;
  142.       color: lightseagreen;
  143.     }
  144.     /* 商品列表区的图片，照原尺寸缩小一点 */
  145.     .goods-list-info img {
  146.       width: 80%;
  147.     }
  148.     /* 设置商品项目中的文字说明区域的宽度 */
  149.     .goods-list-info a:last-of-type {
  150.       width: 30vw;
  151.     }
  152.     /* 底部转为弹性盒，也设置固定定位 */
  153.     footer {
  154.       display: flex;
  155.       height: 8vh;
  156.       width: 100vw;
  157.       justify-content: space-around;
  158.       align-items: center;
  159.       background-color: rgb(250, 240, 240);
  160.       position: fixed;
  161.       bottom: 0;
  162.     }
  163.     /* 底部的每个弹性项目再转为弹性盒，垂直排列 */
  164.     footer > div > a {
  165.       display: flex;
  166.       flex-flow: column nowrap;
  167.       align-items: center;
  168.     }
  169.   </style>
  • 静态图如下：

  • 动态图如下：

3. 总结：

昨天学了弹性容器的专用属性，今天又学了弹性项目的属性，主要有以下几个：

属性名 含义
flex-gorw 增长比例
flex-shrink 缩减比例
flex-basis 默认大小
flex 上述三者的简写
align-self 自身的对齐方式
order 项目顺序

在布局的时候，一定要搞清楚属性用在什么地方，是容器还是项目，不然用了也没效果，可以多结合火狐浏览器的控制台来测试，排查问题。

上一条：Flex布局知识及实战案例演示下一条：服务端 - PHP - 路由
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多