h5-伸缩布局-小案例

1.伸缩布局案例1-基本页面布局

1.1.html

<div class="layout">
    <header></header>
    <main>
        <article></article>
        <aside></aside>
    </main>
    <footer></footer>
</div>

1.2.css

    <style>
        .layout{
            width: 500px;
            height: 600px;
            background-color: #ccc;
            margin: 10px auto;
            display: flex;
            /*设置为侧轴排列*/
            flex-direction: column;
        }
        header{
            width: 100%;
            height: 60px;
            background-color: red;
        }
        main{
            width: 100%;
            background-color: green;
            /*让当前伸缩项占据如容器的剩余空间*/
            flex: 1;
            display: flex;
        }
        main > article{
            height: 100%;
            flex: 1;
            background-color: deeppink;
        }
        main > aside{
            height: 100%;
            flex: 3;
            background-color: blue;
        }
        footer{
            width: 100%;
            height: 80px;
            background-color: purple;
        }
    </style>

1.3.效果图

2.flex：伸缩菜单项小案例

2.1.html

<div>
    <ul>
        <li>首页</li>
        <li>商品分类</li>
        <li>我的订单</li>
        <li>最新商品</li>
        <li>联系我们</li>
    </ul>
</div>

2.2.css

    <style>
        div{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        div > ul{
            list-style: none;
            width: 100% ;
            /*将父元素设置为伸缩盒子，子元素默认会float*/
            display: flex;
        }
        div>ul>li{
            height: 36px;
            line-height: 36px;
            text-align: center;
            background-color: #3aff86;
            border-right: 1px solid #ccc;
            flex: 1;
        }
    </style>

2.3.效果图：