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:;
             display: flex;
         }
         main > article{
             height: 100%;
             flex:;
             background-color: deeppink;
         }
         main > aside{
             height: 100%;
             flex:;
             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:;
         }
     </style>

2.3.效果图：