1 /* pages/classic/classic.wxss */ 2 3 .chunk { 4 /* 行内元素可设置但是设置了flex,无效了 *//* display: inline-block; */ 5 width: 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 width: 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 }