css overflow和flex布局搭配使用，頁面塊可以滑動

本文轉載自查看原文 2020-04-17 12:23 1428 CSS

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         
 7         <style>
 8             
 9             .a{
10                 height: 100px;
11                 width: 250px;
12                 background-color: #bfa;
13                 border: 2px #00AA00 solid;
14                 display: flex;
15                 /* 出現滾動條 */
16                 overflow: auto;
17                 
18                 
19             }
20             
21             .a div{
22                 height: 100px;
23                 width: 100px;
24                 margin-right:70px;
25                 /* 彈性項不伸縮 */
26                 flex: none;
27                 border-radius: 10px;
28                 
29                 
30             }
31             
32             .a .b{
33                 background-color: red;
34             }
35             
36             .a .c{
37                 background-color: #0000FF;
38                 
39             }
40             .a .d{
41                 background-color: cadetblue;
42                 opacity: .3;
43             }
44         </style>
45     </head>
46     <body>
47         <div class="a">
48             
49             <div class="b"></div>
50             <div class="c"></div>
51             <div class="d"></div>
52         </div>
53     </body>
54 </html>

效果

內容

1. 父元素a使用overflow: auto; 使其出現水平滾動條，可以滑動子元素，

2.注意；flex: none; 元素伸縮性是是對彈性子項使用的

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS 使用Flex布局讓元素保持在頁面底部 flex布局--可滑動-換行解決頁面使用overflow: scroll在iOS上滑動卡頓的問題 css關於flex布局下不能實現text-overflow: ellipsis的解決辦法 css--flex彈性布局詳解和使用 flex布局overflow:auto滾動時候顯示不全 flex布局下overflow失效問題 css3 flex 布局 css中的flex布局 CSS布局——display: flex