樂
喜
安
平

HTML5-13

1.弹性盒子

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>弹性盒子</title>
 6         <style type="text/css">
 7             .small{
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: red;
11                 border: 2px solid black;
12             }
13             #con{
14                 border: 2px solid green;
15                 display: flex;
16                 /* 当子类元素总宽度超过了容器宽度,则换行 */
17                 /* 换行后容器的宽度依然不会被压缩 */
18                 /* 如果不启用换行,则所有子类元素都位于同一行,随着子类元素的增加,子类元素的宽度会被压缩 */
19                 /* 将容器设置为弹性盒子后,容器内的元素浮动样式及定位样式不能使用 */
20                 flex-wrap: wrap;
21             }
22         </style>
23     </head>
24     <body>
25         <div id="con">
26             <div class="small">
27                 
28             </div>
29             <div class="small">
30                 
31             </div>
32             <div class="small">
33                 
34             </div>
35             <div class="small">
36                 
37             </div>
38             <div class="small">
39                 
40             </div>
41             <div class="small">
42                 
43             </div>
44             <div class="small">
45                 
46             </div>
47             <div class="small">
48                 
49             </div>
50             <div class="small">
51                 
52             </div>
53         </div>
54     </body>
55 </html>

2.弹性盒子-对齐

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>弹性盒子</title>
 6         <style type="text/css">
 7             .small{
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: red;
11                 border: 2px solid black;
12             }
13             #con{
14                 height: 600px;
15                 border: 2px solid green;
16                 /* 设置容器为弹性盒子 */
17                 display: flex;
18                 /* 当子类元素总宽度超过了容器宽度,则换行 */
19                 /* 换行后容器的宽度依然不会被压缩 */
20                 /* 如果不启用换行,则所有子类元素都位于同一行,随着子类元素的增加,子类元素的宽度会被压缩 */
21                 /* 将容器设置为弹性盒子后,容器内的元素浮动样式及定位样式不能使用 */
22                 flex-wrap: wrap;
23                 /* 弹性盒子容器内元素设置水平居中 */
24                 justify-content: center;
25                 /* 弹性盒子容器内元素设置右对齐(默认为左对齐) */
26                 /* justify-content: flex-end; */
27                 /* 将弹性盒子容器规定(固定)高度后,可设置盒子内元素垂直居中 */
28                 /* align-items: center;将容器内每行分隔开来,平均分配各行空间,再分别垂直居中 */
29                 /* align-items: center; */
30                 /* align-content: center;将容器内的所有元素视为一个整体,将该整体垂直居中 */
31                 align-content: center;
32             }
33         </style>
34     </head>
35     <body>
36         <div id="con">
37             <div class="small">
38                 
39             </div>
40             <div class="small">
41                 
42             </div>
43             <div class="small">
44                 
45             </div>
46             <div class="small">
47                 
48             </div>
49             <div class="small">
50                 
51             </div>
52             <div class="small">
53                 
54             </div>
55             <div class="small">
56                 
57             </div>
58             <div class="small">
59                 
60             </div>
61             <div class="small">
62                 
63             </div>
64             <div class="small">
65                 
66             </div>
67         </div>
68     </body>
69 </html>

 

posted @ 2021-07-09 20:28  喵酱爱吃鱼  阅读(64)  评论(0)  编辑  收藏  举报