flex布局-今日头条热门视频效果

尖十利刃

已于 2022-05-16 15:53:15 修改

阅读量144

点赞数 1

分类专栏：弹性盒子学习文章标签： css html css3

于 2022-05-15 23:11:53 首次发布

本文链接：https://blog.csdn.net/m0_66757598/article/details/124790348

版权

本文详细介绍了如何利用CSS3的Flex布局来创建类似今日头条热门视频的效果，涵盖了Flexbox的基本概念、属性设置以及在实际布局中的应用技巧，帮助开发者实现响应式和动态的内容展示。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex弹性布局-今日头条热门视频效果</title>
    <style>
        body {
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        .show-monitor {
            width: 320px;
            /*height: 600px;*/
            /*border: 2px solid red;*/
            margin: 50px 0 0 50px;
        }

        .pane1-head {
            display: flex;
            align-items: center; /*子元素垂直居中，默认未x轴排列*/
        }

        .pane1-head span.pane1-head-title {
            flex-grow: 1; /*占据剩余空间*/
            font-size: 20px;
            margin-left: 10px;
        }

        .pane1-head span.pane1-head-sx {
            font-size: 16px;
            color: red;
            margin-left: 5px;
        }

        .pane1-con {
            height: 94px;
            /*background-color: #ff9406;*/
            margin-top: 20px;