flex布局入门案例(学习笔记20171022001)

最新推荐文章于 2023-03-21 11:09:27 发布

yangjiegang8

最新推荐文章于 2023-03-21 11:09:27 发布

阅读量463

点赞数

分类专栏：笔记文章标签： flex 布局

本文链接：https://blog.csdn.net/yangjiegang8/article/details/78316676

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

参考网络教程写的demo

<html>

<head>
    <title>holy_grail</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
            text-justify: center;
            justify-content: center;
            font:40px black YaHei;
        }

        header,
        footer {
            text-align: center;
            flex: 1 0 10vh;
            background-color: blue;
        }

        .main div {
            border: solid 1px gray;
            border-radius: 2px;
        }

        .main {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .main>div {
            display: flex;
            flex-direction: row;
            background-color: green;
            min-height: 72vh;
        }

        .main>div>div{
            flex: 1;
            display: flex;
        }

        .main>div>div:nth-child(1) {
            flex: 0 0 20%;
            flex-wrap: wrap;
        }

        .main>div>div:nth-child(1)>div {
            display: inherit;
            justify-content: center;
            flex-direction: column;
            /* height: 10%; */
            width: 100%;
        }

        .main>div>div:nth-child(1)>div:nth-of-type(3) {
            order: -1;
        }

        .main>div>div:nth-child(1)>div:nth-of-type(4) {
            order: 1;
        }

        .main>div>div:nth-child(1)>div:nth-of-type(5) {
            order: 2;
        }

        .main>div>div:nth-child(2) {
            display: inherit;
        }

        .main>div>div:nth-child(3) {
            flex: 0 0 20%;
        }
    </style>
</head>

<body>
    <div class="main">
        <header>head</header>
        <div>
            <div>
                <div>menu1</div>
                <div>menu2</div>
                <div>menu3</div>
                <div>menu4</div>
                <div>menu5</div>
                <div>menu6</div>
                <div>menu7</div>
                <div>menu8</div>
            </div>
            <div>center</div>
            <div>right</div>
        </div>
        <footer>foot</footer>
    </div>
</body>

</html>

yangjiegang8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局入门案例(学习笔记20171022001)

参考网络教程写的demo holy_grail * { margin: 0; padding: 0; text-align: center; text-justify: center; justify-content: center;
复制链接

扫一扫

专栏目录