flex伸缩布局三等份 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         section {
 8             width: 80%;
 9             height: 200px;
10             border: 1px solid pink;
11             margin: 100px auto;
12             /*父盒子添加 flex*/
13             display: flex;  /*伸缩布局模式*/
14         }
15         section div {
16 
17             height: 100%;
18 
19         }
20         section div:nth-child(1) {
21             background-color: pink;
22             flex: 1;  /*子盒子添加份数 flex:1 不加单位*/
23         }
24         section div:nth-child(2) {
25             background-color: purple;
26             margin: 0 5px;
27             flex: 1;/*子盒子添加份数*/
28         }
29         section div:nth-child(3) {
30             background-color: pink;
31             flex: 1;/*子盒子添加份数*/
32         }
33     </style>
34 </head>
35 <body>
36 <section>
37     <div></div>
38     <div></div>
39     <div></div>
40 </section>
41 </body>
42 </html>
posted @ 2023-01-16 15:08  落尘001  阅读(335)  评论(0)    收藏  举报