微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > FlexBox对PC端和移动端的布局方案
博主信息
博文 60
粉丝 5
评论 3
访问量 81486
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
FlexBox对PC端和移动端的布局方案
longlong
原创
1231人浏览过

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 项目顺序

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

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：你说得对, 一定要知道当前正处理的是弹性容器,还是弹性项目, 特别是弹性项目, 也可以再嵌套一个弹性容器, 比较容易迷惑人
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录