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

来源：互联网发布：大乐斗门派升级数据编辑：程序博客网时间：2024/05/20 03:39
参考网络教程写的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>
阅读全文
0 0