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

参考网络教程写的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>


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yangjiegang8/article/details/78316676
文章标签: flex 布局
个人分类: 笔记
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭