flex布局相关用法

 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 }