1 < テンプレート>
2 < ビュークラス= "コンテナ" >
3 < ビュークラス= "グリーンTXT" >
4 A
5 </ ビュー>
6 < ビュークラス= "赤TXT" >
7 B
8 </ ビュー>
9 < ビュークラス= "青TXT" >
10 C
11 </ ビュー>
12 <ビュークラス= "ピンクTXT" >
13 D
14 </ ビュー>
15 < ビュークラス= "オレンジTXT" >
16 E
17 </ ビュー>
18 < ビュークラス= "褐色TXT" >
19 F
20 </ ビュー>
21
22
23 </ ビュー>
24 </ テンプレート>
25
26 < スクリプト>
27 輸出デフォルト{
28個の データ（）{
29 リターン{
30
31 }
32 }
33個 の方法：{
34
35 }
36 }
37 </ スクリプト>
38
39 < スタイル>
40 / * 同级目录* /
41 @importのURL（「フレックスwrap.css "）;
42 </ スタイル>
1 .container {
2 / *フレックスコンテナを定義する* /
3 表示：曲がる;
4。 / *
5。 容器素子配列方向内側に配置された
6。 行：左から右に定義された配列方向
7。 ロー・リバース：左に右に
8。 カラム：上から下に
9 列リバース：底から
10 * /
11。 フレックス方向：カラム;
12は
13である * /
14 NOWRAP：ラップしない
15 ラップ：ラップ
16 * /
17。 フレックスラップ：ラップ;
18れている
。19 高さ：600upx。
20 背景色：＃8F8F94。
21 }
22
23 の.txt {
24 フォントサイズ：20ピクセル。
25 幅：150upx。
26 身長：150upx。
27 }
28
29 .red {
30 背景色：赤。
31 }
32
33 .green {
34 背景色：緑。
35 }
36
37 .blue {
38 背景色：青。
39 }
40
41 .brown {
42 背景色：茶色。
43 }
44
45 .orange {
46 背景色：オレンジ。
47 }
48
49 .pink {
50 背景色：ピンク。
51 }
52
53