1 /* pages/classic/classic.wxss */ 2 3 .chunk { 4 /* 行内元素可设置但是设置了flex，无效了 *//* display: inline-block; */ 5 100px; 6 height: 100px; 7 } 8 9 .colour1 { 10 background-color: #5fffff; 11 font-size: 26px; 12 } 13 14 .colour2 { 15 background-color: #9b12eb; 16 } 17 18 .colour3 { 19 background-color: #e65a0a; 20 } 21 22 /* 弹性容器 flex，可以把三个色块自动排列一行 */ 23 24 .container { 25 display: flex; 26 /* 设置block是列cloumn排列还是row行排列 ，默认行排列 27 而column-reverse,倒叙排列，空白不变 28 在行倒叙中，若有空白，则空白也倒叙占位置，但列倒序不变 29 是因为容器大小的原因，水平宽>列宽（自适应），可以设置 30 high：可以是px也可以是百分比 31 width：可以是px也可以是百分比 32 */ 33 flex-direction: row; 34 200px; 35 height: 600px; 36 /* 默认透明 */ 37 background-color: rgba(153, 153, 153, 0.582); 38 /* 主轴与交叉轴，取决于flex-direction */ 39 /* 改变对齐方向 默认start，其余为center（中间对齐），end，space-between（分散对齐）.. 40 主轴方向上的对齐 41 */ 42 justify-content:flex-end; 43 44 /* 在flex的内，块居中，aligin交叉轴的对齐 45 stretch块没有设置高度时自动拉伸高度 46 baseline,块内文字按照第一个块的文字基线(底线)对齐 47 */ 48 align-items:flex-start; 49 /* 50 自动换行,nowrap-不换行 51 wrpa-换行，会自动产生与下与上相等间距 52 方法1：关闭flex容器高度，使其自适应 53 */ 54 flex-wrap:wrap; 55 56 }