神奇的flex布局

flex布局

flex-direction 主轴的方向
flex-wrap 是否一行显示
justify-content 主轴对齐方式 content 居中、flex-start 开始、flex-end 结束、space-around 均等分
align-items 纵轴上的对齐方式
flex-grow 缩放因子 0为缩小，1为扩大

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>flex布局</title>
 8     <style>
 9         .box {
10              100%;
11             height: 500px;
12             background-color: #c2bdb4;
13             padding: 10px;
14             display: flex;
15             /* 一行显示 */
16             flex-direction: row-reverse;
17             /*主轴为水平方向反方向*/
18             /*flex-direction:column;*/
19             /*纵轴垂直方向*/
20 
21             /*换不换行显示 */
22             /* flex-wrap: nowrap;  */
23             /*不换行*/
24 
25             /*在主轴上的对齐方式  */
26             /* justify-content: center; */
27             /* 居中*/
28             /* justify-content: flex-start; */
29             /* 两端对齐，项目之间的间隔相等*/
30             justify-content: space-between;
31             /* justify-content: space-around; */
32             /* 项目两侧间隔相等，项目之间的间隔比项目与边框的间隔大一倍*/
33 
34             /* 在纵轴上的排列 */
35             /* align-items: flex-end; */
36             /* align-items: center; */
37             /*在纵列中间*/
38 
39             /* 缩扩因子 */
40             /* flex-grow: 0; */
41             /* flex-grow: 1; */
42         }
43 
44         .box1,
45         .box2,
46         .box3,
47         .box4,
48         .box5 {
49              100px;
50             height: 100px;
51             background-color: blue;
52             float: left;
53             margin: 10px;
54             text-align: center;
55             line-height: 100px;
56             color: red;
57             font-size: 24px;
58         }
59 
60         .box2 {
61             /* 扩张因子 */
62             flex-grow: 1;
63         }
64     </style>
65 </head>
66 
67 <body>
68     <div class="box">
69         <div class="box1">1</div>
70         <div class="box2">2</div>
71         <div class="box3">3</div>
72         <div class="box4">4</div>
73         <div class="box5">5</div>
74     </div>
75 </body>
76 
77 </html>