1 < テンプレート>
2 < ビュークラス= "コンテナ" >
3 < ビュークラス= "グリーンTXT" >
4 A
5 </ ビュー>
6 < ビュークラス= "赤TXT" >
7 B
8 </ ビュー>
9 < ビュークラス= "青TXT" >
10 C
11 </ ビュー>
12 <！- とズーム- >
13 <！ - <ビュークラス= "グリーンTXT">
14 D
15 </ビュー>
16 > <ビュークラス= "赤TXT"
17 E
18 </ビュー>
19 <ビュークラス= "青TXT">
20 F
21 </ビュー> - >
22 </ ビュー>
23 </ テンプレート>
24
25 < スクリプト>
26 エクスポートデフォルト{
27個の データ（）{
28 リターン{
29
30 }
31は 、}
32の {：方法
33は
34である }
35 }
36 </ スクリプト>
37
38である < スタイル>
39 / * 同じディレクトリ* /
40 ; @importのURL（ "フレックスitems.css"）
41である </ スタイル>
1 .container {
2 / *フレックスコンテナを定義する* /
3 表示：曲がる;
4。 / *
5。 容器素子配列方向内側に配置された
6。 行：左から右に定義された配列方向
7。 ロー・リバース：左に右に
8。 カラム：上から下に
9 列リバース：底から
10 * /
11。 フレックス方向：行、
12は
13である }
14
15 の.txt {
16 フォントサイズ：20ピクセル;
17。 幅：; 150upx
18は、 高さ：150upx;
19。 }
20は、
21である * /
22で 購入：各要素の順序が適切な可撓性容器の内部に設けられ、デフォルトは0である
23である 大に小さい照合、
24 フレックス成長：比設定エレメントを増幅するため、デフォルト値は0であります
25 0の場合、何の増幅
26である 1スケーリング属性は、デフォルト値を定義するために使用されている：フレックス縮小ない
27は 0に設定されているときにスケーリング
28 負の効果なし
29 フレックス基本：長会計またはセット
30 *ありません/
31れる .red {
32 背景色：赤、
33は / *注文:. 3; * /
34は /成長フレックス* :. 1; * /
35 フレックス収縮：0;
36 フレックス基礎：100upx。
37 }
38
39 .green {
40 背景色：緑。
41 / *オーダー：2; * /
42 / *フレックス成長：1; * /
43 フレックスシュリンク：0。
44 }
45
46 .blue {
47 背景色：青。
48 / *オーダー：1 * /
49 / *フレックス成長：1; * /
50 フレックスシュリンク：0。
51 }
52