简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >flex实例：PC端和移动端布局

flex实例：PC端和移动端布局

霏梦
霏梦原创
2020年06月25日 15:19:37909浏览

— 作者：霏梦

pc端通用布局解决方案flex

  • html代码如下：
    1. <div class="box">
    2.     <div class="header">
    3.       <a href="#">LOGO</a>
    4.       <a href="">产品</a>
    5.       <a href="">定价</a>
    6.       <a href="">解决方案</a>
    7.       <a href="">支持</a>
    8.       <a href="">下载</a>
    9.       <a href="">免费使用</a>
    10.     </div>
    11.     <div class="container">
    12.       <div class="aside">我在左边</div>
    13.       <div class="main">我是内容区</div>
    14.       <div class="aside">我在右边</div>
    15.     </div>
    16.     <div class="footer">
    17.       <p><a href="">使用条款</a> <a href="">隐私政策</&a></p>
    18.       <p>霏梦公司 Copyright © 2020 京ICP备080000000号</p>
    19.     </div>
    20.   </div>

  • CSS代码如下：

    1. <style>
    2.     /* 初始化 */
    3.     * {
    4.       margin: 0;
    5.       padding: 0;
    6.       box-sizing: border-box;
    7.     }
    8.     /* body转为flex */
    9.     body{
    10.         min-width: 800px;
    11.         display: flex;
    12.           /* 垂直不换行 */
    13.         flex-flow: row nowrap;
    14.         justify-content: center;
    15.     }
    16.     /* box转为flex */
    17.   .box {
    18.       min-width: 800px;
    19.       display: flex;
    20.       /* 垂直不换行 */
    21.       flex-flow: column nowrap;
    22.     }
    23.     .header,
    24.     .footer{
    25.         height: 50px;
    26.         border: 1px solid black;
    27.     }
    28.     .header{
    29.         display: flex;
    30.         /* 交叉轴上垂直居中显示 */
    31.         align-items: center;
    32.     }
    33.     .header > a {
    34.       color: coral;
    35.       text-decoration: none;
    36.       flex: 0 1 100px;
    37.       /* 文本居中 */
    38.       text-align: center;
    39.     }
    40.     .header > a:first-of-type{
    41.         margin-right: 50px;
    42.     }
    43.     .header > a:last-of-type{
    44.         /* 免费使用 往最右 */
    45.         margin-left: auto;
    46.     }
    47.     /* 鼠标悬停时忽略logo */
    48.     .header >a:hover:not(:first-of-type){
    49.         background-color: chartreuse;
    50.         color:darkblue;
    51.     }
    52.     .container {
    53.       display: flex;
    54.       min-height: 300px;
    55.       margin: 10px auto;
    56.       justify-content: center;
    57.       text-align: center;
    58.     }
    59.     .container > .aside,
    60.     .container>.main{
    61.       border: 1px solid darkorange;
    62.       padding: 10px;
    63.     }
    64.     .container >.aside{
    65.         flex:0 0 200px;
    66.     }
    67.     .container >.main{
    68.         flex: 0 0 380px;
    69.         margin: 0 10px;
    70.     }
    71.     .footer{
    72.         display: flex;
    73.        /* 垂直方向不换行*/
    74.         flex-flow: column nowrap;
    75.         text-align: center;
    76.     }
    77.     .footer > p > a{
    78.         text-decoration: none;
    79.     }
    81.   </style>
  • 如图所示：
    flex

移动端布局方案

  • html代码如下：

    1. <body>
    2.   <!-- 页眉 -->
    3.   <header>
    4.     <a href="">LOGO</a>
    5.     <span class="iconfont">&#xe61f;</span>
    6.   </header>
    8.   <!-- 轮播区域 -->
    9.   <div class="slider">
    10.     <img src="static/images/banner.jpg" alt="" />
    11.   </div>
    13.   <!-- 主要导航区域 -->
    14.   <div class="nav">
    15.     <div>
    16.       <a href=""><img src="static/images/link1.webp" alt="" /></a>
    17.       <a href="">天猫超市</a>
    18.     </div>
    19.     <div>
    20.       <a href=""><img src="static/images/link2.webp" alt="" /></a>
    21.       <a href="">服装百货</a>
    22.     </div>
    23.     <div>
    24.       <a href=""><img src="static/images/link3.webp" alt="" /></a>
    25.       <a href="">数码电器</a>
    26.     </div>
    27.     <div>
    28.       <a href=""><img src="static/images/link1.webp" alt="" /></a>
    29.       <a href="">图书精品</a>
    30.     </div>
    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/link1.webp" alt="" /></a>
    45.       <a href="">图书精品</a>
    46.     </div>
    47.   </div>
    49.   <h2>
    50.     商品热销区
    51.     <span class="iconfont hot" style="color: coral;">&#xe60b;</span>
    52.   </h2>
    53.   <div class="goods-hot">
    54.     <div class="goods-img">
    55.       <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
    56.       <p>Apple iPhone 11 128G</p>
    57.       <div>
    58.         <span>6299&nbsp;元</span>
    59.         <span class="iconfont hot">&#xe602;</span>
    60.       </div>
    61.     </div>
    62.     <div class="goods-img">
    63.       <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
    64.       <p>Apple iPhone X 512G</p>
    65.       <div>
    66.         <span>8299&nbsp;元</span>
    67.         <span class="iconfont hot">&#xe602;</span>
    68.       </div>
    69.     </div>
    70.     <div class="goods-img">
    71.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    72.       <p>华为笔记本电脑</p>
    73.       <div>
    74.         <span>5699&nbsp;元</span>
    75.         <span class="iconfont hot">&#xe602;</span>
    76.       </div>
    77.     </div>
    78.     <div class="goods-img">
    79.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    80.       <p>小米笔记本电脑</p>
    81.       <div>
    82.         <span>3999&nbsp;元</span>
    83.         <span class="iconfont hot">&#xe602;</span>
    84.       </div>
    85.     </div>
    86.     <div class="goods-img">
    87.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    88.       <p>联想笔记本电脑</p>
    89.       <div>
    90.         <span>4399&nbsp;元</span>
    91.         <span class="iconfont hot">&#xe602;</span>
    92.       </div>
    93.     </div>
    94.   </div>
    95.   <!-- 商品列表 -->
    96.   <h2 class="title">
    97.     商品列表
    98.     <span class="iconfont hot" style="color: tomato;">&#xe64b;</span>
    99.   </h2>
    100.   <div class="goods-list">
    101.     <div class="goods-desc">
    102.       <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
    103.       <a href=""
    104.         >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
    105.         今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,测试的</a
    106.       >
    107.     </div>
    108.     <div class="goods-desc">
    109.       <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
    110.       <a href=""
    111.         >西门子泳衣机 免费领取500元话费,
    112.         今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,测试的</a
    113.       >
    114.     </div>
    115.     <div class="goods-desc">
    116.       <a href=""><img src="static/images/goods5.png" alt="" /></a>
    117.       <a href=""
    118.         >这是一部全屏手机，价格只要1元，颜色很多，免费3年维修更换，快递免费，上门更换</a
    119.       >
    120.     </div>
    121.     <div class="goods-desc">
    122.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    123.       <a href=""
    124.         >ROG冰锐2 15.6英寸240Hz电竞屏高色域轻薄便携游戏本笔记本电脑（R9-4900HS
    125.         8核7nm 16G 1TSSD RTX2060MaxQ</a
    126.       >
    127.     </div>
    128.   </div>
    130.   <!-- 页脚 -->
    131.   <footer>
    132.     <a href="">
    133.       <span class="iconfont hot">&#xe60c;</span>
    134.       <span>首页</span>
    135.     </a>
    136.     <a href="">
    137.       <span class="iconfont hot">&#xe60c;</span>
    138.       <span>分类</span>
    139.     </a>
    140.     <a href="">
    141.       <span class="iconfont hot">&#xe60c;</span>
    142.       <span>购物车</span>
    143.     </a>
    144.     <a href="">
    145.       <span class="iconfont hot">&#xe60c;</span>
    146.       <span>未登录</span>
    147.     </a>
    148.   </footer>
    149. </body>

  • css代码如下 ：

    1. <style>
    2.   /* 初始化 */
    3.   * {
    4.     margin: 0;
    5.     padding: 0;
    6.     box-sizing: border-box;
    7.   }
    8.   a {
    9.     text-decoration: none;
    10.     color: grey;
    11.   }
    13.   html {
    14.     /* 可视区域的宽和高 */
    15.     width: 100vw;
    16.     height: 100vh;
    17.     font-size: 14px;
    18.     /* font-family:Arial, Helvetica, sans-serif; */
    19.     color: grey;
    20.   }
    21.   body {
    22.     min-width: 360px;
    23.     background-color: white;
    24.     display: flex;
    25.     flex-flow: column nowrap;
    26.   }
    28.   header {
    29.     color: white;
    30.     background-color: #333;
    31.     height: 30px;
    33.     display: flex;
    34.     justify-content: space-between;
    35.     align-items: center;
    37.     position: fixed;
    38.     width: 100vw;
    39.     padding: 0 10px;
    40.   }
    42.   .slider {
    43.     height: 180px;
    44.   }
    45.   .slider > img {
    46.     height: 100%;
    47.   }
    48.   .nav {
    49.     height: 200px;
    50.     margin-bottom: 10px;
    52.     display: flex;
    53.     /* 转为多行容器 */
    54.     flex-flow: row wrap;
    55.     align-content: space-around;
    56.   }
    57.   .nav > div {
    58.     width: 25vw;
    59.     display: flex;
    60.     flex-flow: column nowrap;
    61.     text-align: center;
    62.   }
    63.   .nav > div > a img {
    64.     width: 50%;
    65.   }
    66.   .title {
    67.     text-align: center;
    68.     font-size: 1.6rem;
    69.     font-weight: normal;
    70.   }
    71.   .goods-hot {
    72.     border-top: 1px solid #cdcdcd;
    73.     margin-top: 10px;
    74.     font-size: 0.8rem;
    75.     display: flex;
    76.     /* 水平多行容器 */
    77.     flex-flow: row wrap;
    78.   }
    79.   .goods-hot img {
    80.     width: 100%;
    81.   }
    82.   .goods-hot > .goods-img {
    83.     /* 内边距并重置大小 */
    84.     padding: 10px;
    85.     box-sizing: border-box;
    86.     /* 允许放大不允许缩小,否则项目不会换行,多行容器失效 */
    87.     flex: 1 0 30vw;
    89.     /* 转为flex */
    90.     display: flex;
    91.     /* 主轴垂直且不允许换行 */
    92.     flex-flow: column nowrap;
    93.     justify-content: center;
    94.   }
    95.   /* 转flex,主轴上排列对齐方式 */
    96.   .goods-hot > .goods-img > div {
    97.     display: flex;
    98.     /* 分散对齐 */
    99.     justify-content: space-around;
    100.   }
    102.   .goods-list {
    103.     padding: 10px;
    104.     border: 1px solid #cdcdcd;
    105.     margin-top: 10px;
    106.     font-size: 14px;
    107.     display: flex;
    108.     /* 主轴必须是垂直 */
    109.     flex-flow: column nowrap;
    110.   }
    111.   .goods-list > .goods-desc {
    112.     display: flex;
    113.     margin: 10px 0;
    114.   }
    115.   .goods-list > .goods-desc > a {
    116.     padding: 10px 0;
    117.     box-sizing: border-box;
    118.   }
    119.   /* 图片全部适应项目空间 */
    120.   .goods-list > .goods-desc > a > img {
    121.     width: 100%;
    122.   }
    124.   .goods-list > .goods-desc > a:last-of-type:hover {
    125.     color: seagreen;
    126.   }
    127.   footer {
    128.     color: #666;
    129.     height: 60px;
    130.     background-color: #efefef;
    131.     border-top: 1px solid #666;
    132.     position: fixed;
    133.     bottom: 0;
    134.     width: 100vw;
    135.     display: flex;
    136.     justify-content: space-around;
    137.   }
    138.   footer > a {
    139.     margin-top: 10px;
    140.     display: flex;
    141.     /* 垂直排列不换行  */
    142.     flex-flow: column nowrap;
    143.     /* 交叉轴项目居中显示 */
    144.     align-items: center;
    145.   }
    146.   footer a > span:first-of-type {
    147.     font-size: 1.6rem;
    148.   }
    149.   .hot {
    150.     /* 底部图标的颜色 */
    151.     color: coral;
    152.   }
    153. </style>
  • 图标样式和图片，请自行替换，参考阿里图标，这里就不写了
  • 效果图
    flex移动端

- 总结

  1. 建议用firefox浏览器，并写并看效果，并调试
  2. 要清楚flex的容器和项目，特别要知道主轴和交叉轴的显示
  3. 要会阿里图标的应用
  4. 需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效
  5. 有下面六种属性可以设置在容器上，它们分别是：
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content
上一条：laravel实战-通用后台管理系统-管理员CURD和权限验证中间件下一条：浮动的学习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多