menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

flex布局应用

武飞扬头像
BigData_0504
帮助1人

1. 等高布局

flex 实现等高布局非常轻松

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>Document</title>
  8.  
    </head>
  9.  
    <style>
  10.  
    .main{
  11.  
    width: 150px;
  12.  
    background-color: aqua;
  13.  
    display: flex;
  14.  
     
  15.  
    }
  16.  
    .mian div{
  17.  
    background-color: pink;
  18.  
    border: 1px black solid;
  19.  
    box-sizing: border-box;
  20.  
    }
  21.  
    </style>
  22.  
    <body>
  23.  
    <div class="main">
  24.  
    <div>
  25.  
    <p>测试文字</p>
  26.  
    </div>
  27.  
    <div>
  28.  
    <p>测试文字</p>
  29.  
    <p>测试文字</p>
  30.  
    <p>测试文字</p>
  31.  
    <p>测试文字</p>
  32.  
    <p>测试文字</p>
  33.  
    <p>测试文字</p>
  34.  
    <p>测试文字</p>
  35.  
    <p>测试文字</p>
  36.  
    </div>
  37.  
    </div>
  38.  
    </body>
  39.  
    </html>
学新通

实现效果如下图所示：

学新通

2. 两列/三列布局

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>Document</title>
  8.  
    </head>
  9.  
    <style>
  10.  
    .main{
  11.  
    width: 500px;
  12.  
    height: 500px;
  13.  
    background-color: red;
  14.  
    display: flex;
  15.  
    }
  16.  
    .main div:nth-of-type(1){
  17.  
    width: 200px;
  18.  
    background-color: aqua;
  19.  
    }
  20.  
    .div2{
  21.  
    background-color: yellow;
  22.  
    flex-grow: 1;
  23.  
    }
  24.  
     
  25.  
    </style>
  26.  
    <body>
  27.  
    <div class="main">
  28.  
    <div>第一列，固定宽度</div>
  29.  
    <div class="div2">第二列自适应容器宽度</div>
  30.  
     
  31.  
    </div>
  32.  
    </body>
  33.  
    </html>
学新通

学新通

 同理，可以设置三列布局，将作用两侧容器的宽度固定，中间部分容器宽度设置为自适应即可。

3.溢出项布局

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>溢出项布局</title>
  8.  
    </head>
  9.  
    <style>
  10.  
    .main{
  11.  
    width: 100px;
  12.  
    height: 500px;
  13.  
    background-color: aqua;
  14.  
    display: flex;
  15.  
    }
  16.  
    .main div{
  17.  
    width: 150px;
  18.  
    margin-right: 10px;
  19.  
    /* 溢出项布局的关键在于，将自动收缩属性设置为0 */
  20.  
    flex-shrink: 0;
  21.  
    background-color: red;
  22.  
    }
  23.  
    </style>
  24.  
    <body>
  25.  
    <div class="main">
  26.  
    <div>1</div>
  27.  
    <div>2</div>
  28.  
    <div>3</div>
  29.  
    <div>4</div>
  30.  
    <div>5</div>
  31.  
    </div>
  32.  
     
  33.  
    </body>
  34.  
    </html>
学新通

4.粘性页脚布局

当内容不满满屏时候，页脚在页面的底部，当内容满屏是，页脚紧紧跟随在内容的后面 

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>Document</title>
  8.  
    <style>
  9.  
    body{
  10.  
    margin: 0;
  11.  
    }
  12.  
    .main{
  13.  
    min-height: 100vh;
  14.  
    display: flex;
  15.  
    flex-direction: column;
  16.  
    }
  17.  
    .header{
  18.  
    background: skyblue;
  19.  
    height: 100px;
  20.  
    }
  21.  
    .content{
  22.  
    flex-grow: 1;
  23.  
    }
  24.  
    .footer{
  25.  
    background: red;
  26.  
    height: 100px;
  27.  
    }
  28.  
    </style>
  29.  
    </head>
  30.  
    <body>
  31.  
    <div class="mian">
  32.  
    <div class="header"></div>
  33.  
    <div class="content">
  34.  
    <p>测试内容</p>
  35.  
    <p>测试内容</p>
  36.  
    <p>测试内容</p>
  37.  
    <p>测试内容</p>
  38.  
    <p>测试内容</p>
  39.  
    <p>测试内容</p>
  40.  
    <p>测试内容</p>
  41.  
    </div>
  42.  
    <div class="footer"></div>
  43.  
    </div>
  44.  
    </body>
  45.  
    </html>
学新通

综合案例

1.轮播图

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8" />
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.  
    <title>轮播图</title>
  8.  
    <link rel="stylesheet" href="./icon/iconfont.css" />
  9.  
    <link rel="stylesheet" href="./icon/iconfont.json" />
  10.  
    <link rel="stylesheet" href="./icon/iconfont.ttf" />
  11.  
    <style>
  12.  
    .swiper-container {
  13.  
    position: relative;
  14.  
    }
  15.  
    .swiper-wrapper {
  16.  
    display: flex;
  17.  
    }
  18.  
    .swiper-slide {
  19.  
    width: 100%;
  20.  
    flex-shrink: 0;
  21.  
    }
  22.  
    .swiper-slide img {
  23.  
    width: 100%;
  24.  
    }
  25.  
    .swiper-pagination {
  26.  
    position: absolute;
  27.  
    height: 28px;
  28.  
    width: 100%;
  29.  
    bottom: 0;
  30.  
    display: flex;
  31.  
    justify-content: center;
  32.  
    align-items: center;
  33.  
    }
  34.  
    .swiper-pagination-bullet {
  35.  
    width: 8px;
  36.  
    height: 8px;
  37.  
    border-radius: 50%;
  38.  
    background: antiquewhite;
  39.  
    margin: 0 4px;
  40.  
    }
  41.  
    .swiper-pagination-bullet-active {
  42.  
    background: pink;
  43.  
    }
  44.  
    .swiper-button-prev{
  45.  
    position: absolute;
  46.  
    left:0;
  47.  
    top:50%;
  48.  
    display: flex;
  49.  
    align-items: center;
  50.  
    }
  51.  
    .swiper-button-next{
  52.  
    position: absolute;
  53.  
    right: 0;
  54.  
    top:50%;
  55.  
    display: flex;
  56.  
    align-items: center;
  57.  
    }
  58.  
    i{
  59.  
    font-size: 88px;
  60.  
    color: brown;
  61.  
    }
  62.  
    </style>
  63.  
    </head>
  64.  
    <body>
  65.  
    <div class="swiper-container">
  66.  
    <div class="swiper-wrapper">
  67.  
    <div class="swiper-slide"><img src="./图片/1.jpg" alt="#" /></div>
  68.  
    <div class="swiper-slide"><img src="./图片/2.jpg" alt="#" /></div>
  69.  
    <div class="swiper-slide"><img src="./图片/3.jpg" alt="#" /></div>
  70.  
    <div class="swiper-slide"><img src="./图片/4.jpg" alt="#" /></div>
  71.  
    </div>
  72.  
    <!-- 分页器 -->
  73.  
    <div class="swiper-pagination">
  74.  
    <span
  75.  
    class="swiper-pagination-bullet swiper-pagination-bullet-active"
  76.  
    ></span>
  77.  
    <span class="swiper-pagination-bullet"></span>
  78.  
    <span class="swiper-pagination-bullet"></span>
  79.  
    <span class="swiper-pagination-bullet"></span>
  80.  
    </div>
  81.  
    <!-- 导航按钮 -->
  82.  
    <div class="swiper-button-prev">
  83.  
    <i class="iconfont icon-xiangzuojiantou"></i>
  84.  
    </div>
  85.  
    <div class="swiper-button-next">
  86.  
    <i class="iconfont icon-jinrujiantou"></i>
  87.  
    </div>
  88.  
    </div>
  89.  
    </body>
  90.  
    </html>
学新通

2.知乎导航栏

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>Document</title>
  8.  
    <link rel="stylesheet" href="./reset.css">
  9.  
    <link rel="stylesheet" href="./icon2/iconfont.css">
  10.  
    <link rel="stylesheet" href="./icon2/iconfont.json">
  11.  
    <link rel="stylesheet" href="./icon2/iconfont.ttf">
  12.  
    <style>
  13.  
    body{
  14.  
    background: #f6f6f6;
  15.  
    }
  16.  
    .header-container{
  17.  
    background: #ffffff;
  18.  
    }
  19.  
    .header-wrapper{
  20.  
    margin: 0 auto;
  21.  
    height: 52px;
  22.  
    min-width: 1000px;
  23.  
    max-width: 1156px;
  24.  
    display: flex;
  25.  
    align-items: center;
  26.  
    }
  27.  
    .header-logo{
  28.  
    margin-right: 20px;
  29.  
    }
  30.  
    .header-nav{
  31.  
    list-style: none;
  32.  
    display: flex;
  33.  
     
  34.  
    }
  35.  
    .header-nav li{
  36.  
    margin-right: 30px;
  37.  
    }
  38.  
    .header-search{
  39.  
    /* height: 20px; */
  40.  
    display: flex;
  41.  
    flex-grow: 1;
  42.  
    justify-content: center;
  43.  
    }
  44.  
    .header-search-wrapper{
  45.  
    max-width: 452px;
  46.  
    height: 34px;
  47.  
    display: flex;
  48.  
    align-items: center;
  49.  
    justify-content: space-between;
  50.  
    flex-grow: 1;
  51.  
    background: #f6f6f6;
  52.  
    border-radius: 100px;
  53.  
    }
  54.  
    .header-search-input{
  55.  
    border: none;
  56.  
    background: none;
  57.  
    margin: 0 20px;
  58.  
    }
  59.  
    .header-search-wrapper i{
  60.  
    margin: 0 20px;
  61.  
    }
  62.  
    .header-btn{
  63.  
    display: flex;
  64.  
    }
  65.  
    .header-btn-login{
  66.  
    width: 60px;
  67.  
    height: 32px;
  68.  
    border: 1px #0066ff solid;
  69.  
    border-radius: 3px;
  70.  
    color: #0066ff;
  71.  
    /* 去除按钮默认背景 */
  72.  
    background: none;
  73.  
    cursor: pointer;
  74.  
    display: block;
  75.  
    margin-left: 20px;
  76.  
    }
  77.  
    .header-btn-zhihu{
  78.  
    width: 90px;
  79.  
    height: 32px;
  80.  
    background: #0066ff;
  81.  
    color: white;
  82.  
    border: none;
  83.  
    border-radius: 3px;
  84.  
    display: block;
  85.  
    margin-left: 20px;
  86.  
    cursor: pointer;
  87.  
    }
  88.  
    </style>
  89.  
    </head>
  90.  
    <body>
  91.  
    <div class="header-container">
  92.  
    <div class="header-wrapper">
  93.  
    <div class="header-logo">
  94.  
    <a href="#"><img src="./logo.PNG" alt="#"></a>
  95.  
    </div>
  96.  
    <ul class="header-nav">
  97.  
    <li>首页</li>
  98.  
    <li>会员</li>
  99.  
    <li>发现</li>
  100.  
    <li>等你来答</li>
  101.  
    </ul>
  102.  
    <div class="header-search">
  103.  
    <div class="header-search-wrapper">
  104.  
    <input class="header-search-input" type="text" placeholder="520文案">
  105.  
    <i class="iconfont icon-fangdajing"></i>
  106.  
    </div>
  107.  
     
  108.  
    </div>
  109.  
    <div class="header-btn">
  110.  
    <button class="header-btn-login">登录</button>
  111.  
    <button class="header-btn-zhihu">加入知乎</button>
  112.  
    </div>
  113.  
    </div>
  114.  
    </div>
  115.  
    </body>
  116.  
    </html>
学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgeicbf
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群