flex布局应用

最新推荐文章于 2024-04-28 17:46:18 发布

BigData_0504

最新推荐文章于 2024-04-28 17:46:18 发布

阅读量1.2k

点赞数

分类专栏：前端 # HTML+CSS 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_42447364/article/details/125248380

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

HTML+CSS

8 篇文章 0 订阅

订阅专栏

1. 等高布局

flex 实现等高布局非常轻松

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .main{
    width: 150px;
    background-color: aqua;
    display: flex;
    
  }
  .mian div{
    background-color: pink;
    border: 1px black solid;
    box-sizing: border-box;
  }
</style>
<body>
  <div class="main">
    <div>
      <p>测试文字</p>
    </div>
    <div>
      <p>测试文字</p>
      <p>测试文字</p>
      <p>测试文字</p>
      <p>测试文字</p>
      <p>测试文字</p>
      <p>测试文字</p>
      <p>测试文字</p>
      <p>测试文字</p>
    </div>
  </div>
</body>
</html>

实现效果如下图所示：

2. 两列/三列布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .main{
    width: 500px;
    height: 500px;
    background-color: red;
    display: flex;
  }
  .main div:nth-of-type(1){
    width: 200px;
    background-color: aqua;
  }
  .div2{
    background-color: yellow;
    flex-grow: 1;
  }
  
</style>
<body>
  <div class="main">
    <div>第一列，固定宽度</div>
    <div class="div2">第二列自适应容器宽度</div>

  </div>
</body>
</html>

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

3.溢出项布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>溢出项布局</title>
</head>
<style>
  .main{
    width: 100px;
    height: 500px;
    background-color: aqua;
    display: flex;
  }
  .main div{
    width: 150px;
    margin-right: 10px;
    /* 溢出项布局的关键在于，将自动收缩属性设置为0 */
    flex-shrink: 0;
    background-color: red;
  }
</style>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  
</body>
</html>

4.粘性页脚布局

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        .main{
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .header{
            background: skyblue;
            height: 100px;
        }
        .content{
            flex-grow: 1;
        }
        .footer{
            background: red;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="mian">
        <div class="header"></div>
        <div class="content">
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

综合案例

1.轮播图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="./icon/iconfont.css" />
    <link rel="stylesheet" href="./icon/iconfont.json" />
    <link rel="stylesheet" href="./icon/iconfont.ttf" />
    <style>
      .swiper-container {
        position: relative;
      }
      .swiper-wrapper {
        display: flex;
      }
      .swiper-slide {
        width: 100%;
        flex-shrink: 0;
      }
      .swiper-slide img {
        width: 100%;
      }
      .swiper-pagination {
        position: absolute;
        height: 28px;
        width: 100%;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: antiquewhite;
        margin: 0 4px;
      }
      .swiper-pagination-bullet-active {
        background: pink;
      }
      .swiper-button-prev{
        position: absolute;
        left:0;
        top:50%;
        display: flex;
        align-items: center;
      }
      .swiper-button-next{
        position: absolute;
        right: 0;
        top:50%;
        display: flex;
        align-items: center;
      }
      i{
        font-size: 88px;
        color: brown;
      }
    </style>
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./图片/1.jpg" alt="#" /></div>
        <div class="swiper-slide"><img src="./图片/2.jpg" alt="#" /></div>
        <div class="swiper-slide"><img src="./图片/3.jpg" alt="#" /></div>
        <div class="swiper-slide"><img src="./图片/4.jpg" alt="#" /></div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination">
        <span
          class="swiper-pagination-bullet swiper-pagination-bullet-active"
        ></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
      </div>
      <!-- 导航按钮 -->
      <div class="swiper-button-prev">
        <i class="iconfont icon-xiangzuojiantou"></i>
      </div>
      <div class="swiper-button-next">
        <i class="iconfont icon-jinrujiantou"></i>
      </div>
    </div>
  </body>
</html>

2.知乎导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./icon2/iconfont.css">
    <link rel="stylesheet" href="./icon2/iconfont.json">
    <link rel="stylesheet" href="./icon2/iconfont.ttf">
    <style>
        body{
            background: #f6f6f6;
        }
        .header-container{
            background: #ffffff;
        }
        .header-wrapper{
            margin: 0 auto;
            height: 52px;
            min-width: 1000px;
            max-width: 1156px;
            display: flex;
            align-items: center;
        }
        .header-logo{
            margin-right: 20px;
        }
        .header-nav{
            list-style: none;
            display: flex;

        }
        .header-nav li{
            margin-right: 30px;
        }
        .header-search{
            /* height: 20px; */
            display: flex;
            flex-grow: 1;
            justify-content: center;
        }
        .header-search-wrapper{
            max-width: 452px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-grow: 1;
            background: #f6f6f6;
            border-radius: 100px;
        }
        .header-search-input{
            border: none;
            background: none;
            margin: 0 20px;
        }
        .header-search-wrapper i{
            margin: 0 20px;
        }
        .header-btn{
            display: flex;
        }
        .header-btn-login{
            width: 60px;
            height: 32px;
            border: 1px #0066ff solid;
            border-radius: 3px;
            color: #0066ff;
            /* 去除按钮默认背景 */
            background: none;
            cursor: pointer;
            display: block;
            margin-left: 20px;
        }
        .header-btn-zhihu{
            width: 90px;
            height: 32px;
            background: #0066ff;
            color: white;
            border: none;
            border-radius: 3px;
            display: block;
            margin-left: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-logo">
                <a href="#"><img src="./logo.PNG" alt="#"></a>
            </div>
            <ul class="header-nav">
                <li>首页</li>
                <li>会员</li>
                <li>发现</li>
                <li>等你来答</li>
            </ul>
            <div class="header-search">
                <div class="header-search-wrapper">
                    <input class="header-search-input" type="text" placeholder="520文案">
                    <i class="iconfont icon-fangdajing"></i>
                </div>

            </div>
            <div class="header-btn">
                <button class="header-btn-login">登录</button>
                <button class="header-btn-zhihu">加入知乎</button>
            </div>
        </div>
    </div>
</body>
</html>