伸缩布局 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         body{
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         .container{
13             width: 100%;
14             height: 200px;
15             background-color: red;
17             display: flex;
18         }
19 
20         .left{
21             background-color: blue;
22             height: 200px;
23             width: 200px;
24 
25             /*flex: 2;*/
26         }
27 
28         .center{
29             background-color: purple;
30             height: 200px;
31 
32             flex: 1;
33         }
34 
35         .right{
36             background-color: yellow;
37             width: 200px;
38             height: 200px;
39            /* flex: 2;*/
40         }
41     </style>
42 </head>
43 <body>
44     <div class="container">
45         <div class="left">1</div>
46         <div class="center">2</div>
47         <div class="right">3</div>
48     </div>
49 </body>
50 </html>

 

posted @ 2019-06-30 15:41  疏影横斜水清浅  阅读(110)  评论(0)    收藏  举报