/* pages/classic/classic.wxss */

 .chunk {

     /* 行内元素可设置但是设置了flex，无效了 *//* display: inline-block; */

     width: 100px;

     height: 100px;

 }

 .colour1 {

     background-color: #5fffff;

     font-size: 26px;

 }

 .colour2 {

     background-color: #9b12eb;

 }

 .colour3 {

     background-color: #e65a0a;

 }

 /* 弹性容器 flex，可以把三个色块自动排列一行 */

 .container {

     display: flex;

     /* 设置block是列cloumn排列还是row行排列 ，默认行排列

     而column-reverse,倒叙排列，空白不变

     在行倒叙中，若有空白，则空白也倒叙占位置，但列倒序不变

     是因为容器大小的原因，水平宽>列宽（自适应），可以设置

     high：可以是px也可以是百分比

     width：可以是px也可以是百分比

     */

     flex-direction: row;

     width: 200px;

     height: 600px;

     /* 默认透明 */

     background-color: rgba(153, 153, 153, 0.582);

     /* 主轴与交叉轴，取决于flex-direction */

     /* 改变对齐方向 默认start，其余为center（中间对齐），end，space-between（分散对齐）..

     主轴方向上的对齐

     */

     justify-content:flex-end;

     /* 在flex的内，块居中，aligin交叉轴的对齐

         stretch块没有设置高度时自动拉伸高度

         baseline,块内文字按照第一个块的文字基线(底线)对齐

     */

     align-items:flex-start;

     /*

     自动换行,nowrap-不换行

     wrpa-换行，会自动产生与下与上相等间距

     方法1：关闭flex容器高度，使其自适应

     */

     flex-wrap:wrap;

 }