search

博客列表 >使用 FlexBox(弹性布局)对 PC 端和移动端的布局方案

使用 FlexBox(弹性布局)对 PC 端和移动端的布局方案

忠于原味
忠于原味原创
2020年06月25日 22:39:33964浏览

了解 FlexBox 的常用属性

属性 描述
flex-direction: 设置主轴方向默认水平方向:row
flex-wrap: 主轴上的项目是否换行默认不换行：nowrap
flex-flow: flex-direction:和flex-wrap:的简写:flex-flow: flex-direction flex-wrap;
justify-content: 当主轴上存在剩余空间时，控制空间在项目上的分配方案
align-items: 控制所有项目在交叉轴上的对齐方式
align-content: 仅适用于多行容器，控制项目的对齐方式
align-self: 控制单个项目在交叉轴上的对齐方式
flex-grow: 设置项目在主轴空间上的增长因子默认为 0，不放大，作用：可控的让项目增长一定的尺寸填补剩余的空间；
flex-shrink: 收缩因子有效的前提是，所有项目宽度之和必须大于主轴上的当前空间大小，默认是 1
flex-basis: 设置基础尺寸大小，优先级为：min-width > flex-basis > width
flex: 增长因子,收缩因子,基础尺寸的简写例如：flex: 0 1 auto;//默认不放大,可收缩,尺寸使用原始大小

布局的大致思路

  • 如下布局思路，可见页面由导航栏，主体部分，底部三部分构成，所以设置主轴方向为列方向最优。

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>PC端布局的通用的解决方案</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         text-decoration: none;
  16.         color: #666;
  17.       }
  18.       body {
  19.         min-width: 680px;
  20.         display: flex;
  21.         /* 主轴垂直方向，不换行 */
  22.         flex-flow: column nowrap;
  23.       }
  24.       header,
  25.       footer {
  26.         height: 50px;
  27.         border: 1px solid #000;
  28.       }
  29.       /* 将页眉转为弹性盒子 */
  30.       header {
  31.         display: flex;
  32.         /* 所有项目在交叉轴方向上垂直居中显示 */
  33.         align-items: center;
  34.       }
  35.       header > a {
  36.         /* 不放大，可收缩，尺寸100px */
  37.         flex: 0 1 100px;
  38.         /* 文本内容水平居中 */
  39.         text-align: center;
  40.       }
  41.       header > a:first-of-type {
  42.         margin-right: 50px;
  43.       }
  44.       /* 登录/注册靠右 */
  45.       header > a:last-of-type {
  46.         margin-left: auto;
  47.       }
  48.       /* 鼠标悬停时忽略logo */
  49.       header > a:hover:not(:first-of-type) {
  50.         color: coral;
  51.       }
  52.       .container {
  53.         min-height: 400px;
  54.         margin: 10px auto;
  55.         display: flex;
  56.         justify-content: center;
  57.       }
  58.       .container > aside,
  59.       .container > main {
  60.         border: 1px solid #000;
  61.         padding: 10px;
  62.       }
  63.       .container > aside {
  64.         flex: 0 0 200px;
  65.       }
  66.       .container > main {
  67.         flex: 0 0 600px;
  68.         margin: 0 10px;
  69.       }
  70.       footer {
  71.         display: flex;
  72.         /* 主轴方向列方向，不换行 */
  73.         flex-flow: column nowrap;
  74.         /* 文字水平居中 */
  75.         text-align: center;
  76.       }
  77.     </style>
  78.   </head>
  79.   <body>
  80.     <!-- 页眉 -->
  81.     <header>
  82.       <a href="">Logo</a>
  83.       <a href="">首页</a>
  84.       <a href="">栏目1</a>
  85.       <a href="">栏目2</a>
  86.       <a href="">栏目3</a>
  87.       <a href="">登录</a>
  88.     </header>
  89.     <!-- 主体 -->
  90.     <div class="container">
  91.       <aside>左边栏</aside>
  92.       <main>主体内容</main>
  93.       <aside>右边栏</aside>
  94.     </div>
  95.     <!-- 页脚 -->
  96.     <footer>
  97.       <p>
  98.         php中文网 &copy;版权所有 &nbsp;&nbsp;(2018-2022) | 备案号:
  99.         <a href="">皖ICP-18********</a>
  100.       </p>
  101.       <p>中国.合肥市政务新区999号 | 电话: 0551-888999**</p>
  102.     </footer>
  103.   </body>
  104. </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.     <link rel="stylesheet" href="static/font/iconfont.css" />
  7.     <title>移动端的解决方案</title>
  8.     <style>
  9.       /* 初始化 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       a {
  16.         text-decoration: none;
  17.       }
  18.       html {
  19.         /* vw: 可视区宽度，100指100份 */
  20.         /* vh: 可视区高度， 100指100份  */
  21.         width: 100vw;
  22.         height: 100vh;
  23.       }
  24.       body {
  25.         display: flex;
  26.         flex-flow: column nowrap;
  27.       }
  28.       body > header {
  29.         color: white;
  30.         background-color: #333;
  31.         height: 30px;
  32.         display: flex;
  33.         /* 垂直居中 */
  34.         align-items: center;
  35.         /* 两端对齐 */
  36.         justify-content: space-between;
  37.         /* 固定定位 */
  38.         position: fixed;
  39.         width: 100vw;
  40.       }
  41.       /* 轮播图 */
  42.       body > .slider {
  43.         height: 180px;
  44.       }
  45.       body > .slider > img {
  46.         height: 100%;
  47.         width: 100%;
  48.       }
  49.       /* 主导航区 */
  50.       nav {
  51.         height: 200px;
  52.         margin-bottom: 10px;
  54.         display: flex;
  55.         /* 转为多行容器 */
  56.         flex-flow: row wrap;
  57.         align-content: space-around;
  58.       }
  59.       nav > div {
  60.         width: 25vw;
  61.         display: flex;
  62.         /* 主轴垂直，不换行 */
  63.         flex-flow: column nowrap;
  64.         /* 垂直居中 */
  65.         align-items: center;
  66.       }
  67.       nav > div > a:first-of-type {
  68.         text-align: center;
  69.       }
  70.       nav > div img {
  71.         width: 50%;
  72.       }
  73.       /* 每个区域的标题样式 */
  74.       .title {
  75.         margin-top: 10px;
  76.         font-size: 1.2rem;
  77.         font-weight: normal;
  78.         text-align: center;
  79.       }
  80.       /* 热销商品区 */
  81.       .hot-goods {
  82.         border-top: 1px solid #cdcdcd;
  83.         margin-top: 10px;
  84.         font-size: 0.8rem;
  85.         display: flex;
  86.         /* 水平多行容器 */
  87.         flex-flow: row wrap;
  88.       }
  89.       .hot-goods img {
  90.         width: 100%;
  91.       }
  92.       .hot-goods > .goods-img {
  93.         /* 内边距并重置大小 */
  94.         padding: 10px;
  95.         box-sizing: border-box;
  96.         /* 允许放大不允许缩小,否则项目不会换行,多行容器失效 */
  97.         flex: 1 0 30vw;
  99.         /* 再将每个商品描述转为flex */
  100.         display: flex;
  101.         /* 主轴垂直且不允许换行 */
  102.         flex-flow: column nowrap;
  103.         justify-content: center;
  104.       }
  105.       /* 商品描述的最后一个区域转flex,并设置项目在主轴上排列对齐方式 */
  106.       .hot-goods > .goods-img > div {
  107.         display: flex;
  108.         /* 分散对齐 */
  109.         justify-content: space-around;
  110.       }
  112.       /* 热销样式 */
  113.       .hot {
  114.         color: coral;
  115.       }
  117.       /* 商品列表区 */
  118.       .list-goods {
  119.         padding: 10px;
  121.         border-top: 1px solid #cdcdcd;
  122.         margin-top: 10px;
  123.         font-size: 0.8rem;
  125.         display: flex;
  126.         /* 主轴必须是垂直 */
  127.         flex-flow: column nowrap;
  128.       }
  129.       /* 每个项目也转为flex */
  130.       .list-goods > .goods-desc {
  131.         margin: 10px 0;
  132.         display: flex;
  133.       }
  134.       /* 列表中每个项目的样式,加些间距 */
  135.       .list-goods > .goods-desc > a {
  136.         padding: 10px;
  137.         box-sizing: border-box;
  138.       }
  139.       .list-goods > .goods-desc > a:last-of-type:hover {
  140.         color: lightseagreen;
  141.       }
  142.       /* 图片全部适应项目空间 */
  143.       .list-goods img {
  144.         width: 100%;
  145.       }
  147.       body > footer {
  148.         color: #666;
  149.         background-color: #efefef;
  150.         border-top: 1px solid #ccc;
  151.         height: 55px;
  153.         position: fixed;
  154.         bottom: 0;
  155.         width: 100vw;
  157.         display: flex;
  158.         justify-content: space-evenly;
  159.       }
  160.       body > footer a {
  161.         margin-top: 10px;
  162.         font-size: 0.8rem;
  163.         display: flex;
  164.         /* 垂直排列不换行 */
  165.         flex-flow: column nowrap;
  166.         /* 交叉轴项目居中显示 */
  167.         align-items: center;
  168.       }
  169.       body > footer a > span:first-of-type {
  170.         /* 图标字体应该大一些 */
  171.         font-size: 1.6rem;
  172.       }
  173.     </style>
  174.   </head>
  175.   <body>
  176.     <header>
  177.       <a href="">LOGO</a> <span class="iconfont icon-icon"></span>
  178.     </header>
  179.     <!-- 轮播图 -->
  180.     <div class="slider"><img src="static/images/banner.jpg" alt="" /></div>
  181.     <!-- 主导航区 -->
  182.     <nav>
  183.       <div>
  184.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  185.         <a href="">京东超市</a>
  186.       </div>
  187.       <div>
  188.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  189.         <a href="">服装百货</a>
  190.       </div>
  191.       <div>
  192.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  193.         <a href="">数码精品</a>
  194.       </div>
  195.       <div>
  196.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  197.         <a href="">优惠劵</a>
  198.       </div>
  199.       <div>
  200.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  201.         <a href="">超市精选</a>
  202.       </div>
  203.       <div>
  204.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  205.         <a href="">服装百货</a>
  206.       </div>
  207.       <div>
  208.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  209.         <a href="">数码精品</a>
  210.       </div>
  211.       <div>
  212.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  213.         <a href="">优惠劵</a>
  214.       </div>
  215.     </nav>
  216.     <!-- 热销商品 -->
  217.     <h2>热销商品<span class="iconfont icon-huoremen"></span></h2>
  218.     <div class="hot-goods">
  219.       <div class="goods-img">
  220.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  221.         <p>Apple iPhone 11 128G</p>
  222.         <div>
  223.           <span>6299&nbsp;元</span>
  224.           <span class="iconfont icon-gouwuche"></span>
  225.         </div>
  226.       </div>
  227.       <div class="goods-img">
  228.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  229.         <p>Apple iPhone X 512G</p>
  230.         <div>
  231.           <span>8299&nbsp;元</span>
  232.           <span class="iconfont icon-gouwuche"></span>
  233.         </div>
  234.       </div>
  236.       <div class="goods-img">
  237.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  238.         <p>华为笔记本电脑</p>
  239.         <div>
  240.           <span>5699&nbsp;元</span>
  241.           <span class="iconfont icon-gouwuche"></span>
  242.         </div>
  243.       </div>
  244.       <div class="goods-img">
  245.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  246.         <p>小米笔记本电脑</p>
  247.         <div>
  248.           <span>3999&nbsp;元</span>
  249.           <span class="iconfont icon-gouwuche"></span>
  250.         </div>
  251.       </div>
  252.       <div class="goods-img">
  253.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  254.         <p>联想笔记本电脑</p>
  255.         <div>
  256.           <span>4399&nbsp;元</span>
  257.           <span class="iconfont icon-gouwuche"></span>
  258.         </div>
  259.       </div>
  260.     </div>
  262.     <!-- 商品列表区 -->
  263.     <h2 class="title">
  264.       商品列表<span class="iconfont icon-fenlei1 hot"></span>
  265.     </h2>
  266.     <div class="list-goods">
  267.       <div class="goods-desc">
  268.         <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  269.         <a href=""
  270.           >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  271.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  272.           以上都是我瞎编的<span class="iconfont icon-yanjing"></span
  273.         ></a>
  274.       </div>
  275.       <div class="goods-desc">
  276.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  277.         <a href=""
  278.           >[白条24期免息]Apple洗衣机,专业清洗苹果手机,
  279.           苹果电脑,iPad,洗好保证不能用, 免费领取500元保险费,
  280.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  281.           以上都是我瞎编的<span class="iconfont icon-yanjing"></span
  282.         ></a>
  283.       </div>
  284.       <div class="goods-desc">
  285.         <a href=""><img src="static/images/goods5.png" alt="" /></a>
  286.         <a href=""
  287.           >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  288.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  289.           以上都是我瞎编的<span class="iconfont icon-yanjing"></span
  290.         ></a>
  291.       </div>
  292.       <div class="goods-desc">
  293.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  294.         <a href=""
  295.           >[白条24期免息]华为笔记本MateBook 14 全面屏轻薄性能笔记本电脑
  296.           十代酷睿(i5 16G 512G MX250 触控屏 多屏协同)灰, 以上都是我瞎编的<span
  297.             class="iconfont icon-yanjing"
  298.           ></span
  299.         ></a>
  300.       </div>
  301.     </div>
  302.     <footer>
  303.       <a href=""
  304.         ><span class="iconfont icon-shouye1"></span> <span>首页</span></a
  305.       >
  306.       <a href=""
  307.         ><span class="iconfont icon-fenlei"></span> <span>分类</span></a
  308.       >
  309.       <a href=""
  310.         ><span class="iconfont icon-gouwuche"></span> <span>购物车</span></a
  311.       >
  312.       <a href=""
  313.         ><span class="iconfont icon-weidenglu-touxiang"></span
  314.         ><span>未登录</span></a
  315.       >
  316.     </footer>
  317.   </body>
  318. </html>
  • 效果图：
上一条：css选择器的举例演示（前端第四课）下一条：flex 布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多