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>