首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >几个好玩的flex布局案例Flex是个不错的东西,看懂上面三个Demo也就算入门了,如果要了解更全面的内容, 推荐阮一峰老师的 Flex 布局教程语法篇

几个好玩的flex布局案例Flex是个不错的东西,看懂上面三个Demo也就算入门了,如果要了解更全面的内容, 推荐阮一峰老师的 Flex 布局教程语法篇

作者头像
zhaoolee
发布2018-04-19 17:13:36
1.5K0
发布2018-04-19 17:13:36
举报
文章被收录于专栏:木子昭的博客木子昭的博客

弹性盒子布局flex,为自适应布局而生

弹性盒子布局的选项很多(选项越多->越专业->越难记), 但对于普通的开发者,只要记住两三个关键词,就能满足大多数的需求, 这里就通过几个demo,展示弹性盒子布局的魅力

Demo 001: 用flex完成子元素的居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素相对父元素居中</title>
    <style>
        html, *{
            margin: 0;
            padding: 0;


        }

        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .son{

            width: 300px;
            height: 300px;
            background-color: #9DB783;
            flex: 0 1 auto;
        }

    </style>



</head>
<body>

    <div class="son">
        
    </div>

</body>
</html>

Demo 002: 自适应布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应布局</title>
    <style>
        html *{
            margin: 0;
            padding: 0;
        }

        .parent{

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

        }
        .son{

            flex: 0 1 300px;
            background-color: #fdf6e3;
            min-height: 200px;
            box-sizing: border-box;
            border: 3px solid #9DB783;
            padding: 20px;
            margin: 20px;

        }

        .title{
            font-size: 20px;
            color: #c03035;

        }

        .content{

            font-size: 15px;
            color: #323232;

        }

    </style>


</head>
<body>
    <section class="parent">

        <article class="son">
            <span class="title">将进酒</span> <br> <span class="content">君不见, <br>黄河之水天上来, 奔流到海不复回, <br>君不见,<br> 高堂明镜悲白发, 朝如青丝暮成雪</span>
        </article>
        <article class="son">
            <span class="title">丹歌惊鸿</span> <br> <span class="content">天地匆匆 惊鸿而过 路有千百个<br>遑遑无归 闲云逸鹤 人间红尘过<br>引势而流 鸿门乱局 各有各选择<br>乾震坎艮 坤巽离兑 定一切生克</span>
        </article>
        <article class="son">
            <span class="title">将进酒</span> <br> <span class="content">君不见, <br>黄河之水天上来, 奔流到海不复回, <br>君不见,<br> 高堂明镜悲白发, 朝如青丝暮成雪</span>
        </article>
        <article class="son">
            <span class="title">丹歌惊鸿</span> <br> <span class="content">天地匆匆 惊鸿而过 路有千百个<br>遑遑无归 闲云逸鹤 人间红尘过<br>引势而流 鸿门乱局 各有各选择<br>乾震坎艮 坤巽离兑 定一切生克</span>
        </article>
        <article class="son">
            <span class="title">将进酒</span> <br> <span class="content">君不见, <br>黄河之水天上来, 奔流到海不复回, <br>君不见,<br> 高堂明镜悲白发, 朝如青丝暮成雪</span>
        </article>
        <article class="son">
            <span class="title">丹歌惊鸿</span> <br> <span class="content">天地匆匆 惊鸿而过 路有千百个<br>遑遑无归 闲云逸鹤 人间红尘过<br>引势而流 鸿门乱局 各有各选择<br>乾震坎艮 坤巽离兑 定一切生克</span>
        </article>
        <article class="son">
            <span class="title">将进酒</span> <br> <span class="content">君不见, <br>黄河之水天上来, 奔流到海不复回, <br>君不见,<br> 高堂明镜悲白发, 朝如青丝暮成雪</span>
        </article>
        <article class="son">
            <span class="title">丹歌惊鸿</span> <br> <span class="content">天地匆匆 惊鸿而过 路有千百个<br>遑遑无归 闲云逸鹤 人间红尘过<br>引势而流 鸿门乱局 各有各选择<br>乾震坎艮 坤巽离兑 定一切生克</span>
        </article>
        <article class="son">
            <span class="title">将进酒</span> <br> <span class="content">君不见, <br>黄河之水天上来, 奔流到海不复回, <br>君不见,<br> 高堂明镜悲白发, 朝如青丝暮成雪</span>
        </article>
        <article class="son">
            <span class="title">丹歌惊鸿</span> <br> <span class="content">天地匆匆 惊鸿而过 路有千百个<br>遑遑无归 闲云逸鹤 人间红尘过<br>引势而流 鸿门乱局 各有各选择<br>乾震坎艮 坤巽离兑 定一切生克</span>
        </article>
    </section>

</body>
</html>

Demo 003: 圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上中下布局</title>


    <style>

        html *{

            margin: 0;
            padding: 0;

        }

        section{
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            text-align: center;
            line-height: 50px;

        }

        header, footer{
            flex: 0 0 50px;
        }

        main{
            flex: 1 0 auto;
        }

        header{

            background-color: #fdf6e3;

        }

        main{

            background-color: #ffffff;
            display: flex;
            /*轴向默认为横, 其实这里可以不写*/
            flex-direction: row;

        }

        footer{

            background-color: #323232;
            color: #ffffff;

        }

        .left, .right{

            flex: 0 0 200px;


        }
        .left{
            background-color: #509839;
        }

        .right{

            background-color: #823384;

        }

        .center{
            flex: 1 0 auto;

        }


        @media screen and (max-width: 600px){

            main{

                flex-direction: column;

            }

            .left, .right{

                flex: 1 0 auto;


            }
            .center{
                flex: 2 0 auto;
            }


            .left, .right{

                order: 1

            }

        }



    </style>
</head>
<body>

    <section>

        <header>
            <b>丹歌惊鸿(王也)</b>
        </header>
        <main>
            <article class="left">左侧 <br>丹歌起势 同风而起 <br> 卧龙低伏 入我阵来 <br>
                我即方位 我即吉凶 <br> 四方万物 皆我主宰</article>
            <article class="center">
                山里偷得的半日的闲
                <br>搁这儿遛弯儿的人别扰着 您都请便
                <br>半不邋遢 小道名也
                <br>胸无大志 爱咧咧
                <br>少来打听那有的没的
                <br>翻你个底儿掉掀朝天
                <br>顺天下势 理天下事
                <br>云山雾绕 方为术士
                <br>人间不如意 随了谁的性
                </article>
            <article class="right">右侧 <br>但求无愧 自在随心
                <br>常应常静 常静清灵
                <br>凡人本就 六欲七情
                <br>祖师在上 弟子凡心
                <br>不入龙虎局 不得常清静</article>
        </main>
        <footer>
            风后奇门&nbsp;&nbsp;&nbsp;&nbsp;[一人之下]
        </footer>


    </section>

</body>
</html>
弹性盒子布局的属性分为两类:
  • 第一类添加到父标签
  • 第二类添加到子标签

添加到父元素的属性(常用):

  • justify-content(水平对齐方式): flex-start(左对齐), center(居中对齐), flex-right(右对齐), space-between(两端对齐,项目之间的间隔都相等)
  • align-items(垂直对齐方式): stretch(占满整个容器的高度), flex-start(头部对齐), center(居中对齐), flex-right(底部对齐)
  • flex-wrap(子元素是否自动换行): nowrap(打死都不换行) , wrap(自动换行)
  • flex-direction(子元素排列轴向): row(从左到右), column(从上到下)

添加到子元素的属性(常用):

  • flex

Flex是个不错的东西,看懂上面三个Demo也就算入门了,如果要了解更全面的内容, 推荐阮一峰老师的 Flex 布局教程语法篇

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.03.17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 弹性盒子布局flex,为自适应布局而生
  • Demo 001: 用flex完成子元素的居中
  • Demo 002: 自适应布局
  • Demo 003: 圣杯布局
  • 添加到父元素的属性(常用):
  • 添加到子元素的属性(常用):
  • Flex是个不错的东西,看懂上面三个Demo也就算入门了,如果要了解更全面的内容, 推荐阮一峰老师的 Flex 布局教程语法篇
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档