CSS Flex布局示例

最新推荐文章于 2024-01-31 15:10:29 发布

转载最新推荐文章于 2024-01-31 15:10:29 发布 · 503 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/baidu_41388533/article/details/121717865

文章标签：

#css #前端

HTML与CSS进阶专栏收录该内容

42 篇文章

订阅专栏

本文介绍了CSS flex布局的基本概念，包括主轴与交叉轴，如何设置Flex容器与子项的样式，展示了两列与三列布局、StickyFooter布局以及溢出项和轮播图的实现。通过代码实例详细讲解了如何使用flex实现响应式设计和常见的布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS Flex布局示例

flex布局基本知识参考：CSS 布局专题2--flex布局 [转]_baidu_41388533的博客-CSDN博客

主轴与交叉轴

Flex容器与Flex子项

示例

实现：

.main{
    height:200px;
    background: skyblue;
    display: flex;
    align-items: center;
}
.main div{
    width:50px;
    height:100px;
    background:pink;
    margin-right:10px;
}
.main div:nth-of-type(3){
    margin-right: auto;
}
.main div:nth-of-type(6){
    margin-right: auto;
}


<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

两列与三列布局

参考代码：

.main {
    height: 100vh;
    background: skyblue;
    display: flex;
}
.col1 {
    width: 200px;
    background: pink;
}
.col2 {
    flex-grow: 1;
    background: springgreen;
}
.col3 {
    width: 100px;
    background: tomato;
}

<div class="main">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
</div>

Sticky Footer布局

参考代码：

.main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.main .header {
    height: 100px;
    background: pink;
}
.main .content {
    flex-grow: 1;
}
.main .footer {
    height: 100px;
    background: skyblue;
}

<div class="main">
    <div class="header"></div>
    <div class="content">
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
    </div>
    <div class="footer"></div>
</div>

溢出项布局

body {
    margin: 0;
}
.main {
    height: 100px;
    background: skyblue;
    display: flex;
    align-items: center;
}
.main div {
    width: 100px;
    height: 80px;
    background: pink;
    margin-right: 10px;
    flex-shrink: 0;
}

<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

轮播图

参考代码

<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:#c6bcaf;
            margin:0 4px;
        }
        .swiper-pagination-bullet-active{
            background:white;
        }
        .swiper-button-prev, .swiper-button-next{
            position: absolute;
            top:0;
            height:100%;
            display: flex;
            align-items: center;
        }
        .swiper-button-prev{
            left:0;
        }
        .swiper-button-next{
            right:0;
        }
        .swiper-button-prev i, .swiper-button-next i{
            font-size:44px;
            color:white;
        }
    </style>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="https://pic3.iqiyipic.com/common/lego/20210609/e66f0e28608f4aa7b08b5d93088c73c6.jpg?caplist=jpg,webp" alt=""></div>
            <div class="swiper-slide"><img src="https://pic0.iqiyipic.com/common/lego/20210614/71f0084bddcb446db323fa9eebf53585.jpg?caplist=jpg,webp" alt=""></div>
            <div class="swiper-slide"><img src="https://m.iqiyipic.com/common/lego/20210613/80bfb766ac36470f9ec3a3788f85eabe.jpg?caplist=jpg,webp" 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>
        </div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev">
            <i class="iconfont icon-swiperhoutui"></i>
        </div>
        <div class="swiper-button-next">
            <i class="iconfont icon-swiperqianjin"></i>
        </div>
    </div>
</body>

知乎栏案例

参考代码：

<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: 40px;
    }
    .header-nav{
        display: flex;
    }
    .header-nav li{
        margin-right:30px;
    }
    .header-search{
        flex-grow:1;
        display: flex;
        justify-content: center;
    }
    .header-search-wrapper{
        max-width:482px;
        height:34px;
        flex-grow: 1;
        display: flex;
        align-items:center;
        justify-content: space-between;
        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>

<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>