flex布局相关用法

 /* 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;

 }