利用flex常用的6个属性 写出简易响应式布局

案例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>利用flex常用的6个属性 写出简易响应式布局</title>
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="item">item1</div>
  12.         <div class="item">item2</div>
  13.         <div class="item">item3</div>
  14.     </div>
  15.     <style>
  16.         /*初始化处理*/
  17.         *{padding: 0;margin: 0;box-sizing: border-box;border: 1px solid red;}
  18.         .container{
  19.             display: flex;
  20.             height: 300px;
  21.         }
  22.         .container >.item{
  23.             width: 100px;
  24.             padding: 1em;
  25.             border: 1px solid #000; 
  26.             color: #f00;
  27.         }
  28.         .container{
  29.             flex-flow: row wrap;
  30.             place-content: space-evenly;
  31.             place-items: stretch;
  32.             flex:1 1 auto;
  33.         }
  34.         .container>.item:first-of-type{
  35.             background-color: yellow;
  36.             order: 3;
  37.         }
  38.         .container>.item:nth-of-type(2){
  39.             background-color: lawngreen;
  40.             order: 1;
  41.         }
  42.         .container>.item:last-of-type{
  43.             background-color: blue;
  44.             order: -1;
  45.         }
  46.     </style>
  47. </body>
  48. </html>

演示效果

演示页面效果