Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex实例：PC端和移动端布局
Blogger Information
Blog 31
fans 2
comment 0
visits 27686
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex实例：PC端和移动端布局
霏梦
Original
927 people have browsed it

— 作者：霏梦

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
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来是明白了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post