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 }
