レイアウトフレックス、フレックス方向

レイアウトフレックス、フレックス方向

1  < テンプレート> 
2      < ビュークラス= "コンテナ" > 
3          < ビュークラス= "グリーンTXT" > 
4              A
 5          </ ビュー> 
6          < ビュークラス= "赤TXT" > 
7              B
 8          </ ビュー> 
9          < ビュークラス= "青TXT" > 
10              C
 11          </ ビュー> 
12      </ ビュー>
13  </ テンプレート> 
14  
15  < スクリプト> 
16      エクスポートデフォルト{
 17個の         データ（）{
 18              リターン{
 19                  
20              }
 21          }
 22個         の方法：{
 23               
24          }
 25      }
 26  </ スクリプト> 
27  
28  < スタイル> 
29      / * 同级目录* / 
30  @importのURL（ "フレックスdirection.css"）;
31  </ スタイル>

 

CSS

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      .red {
 22          背景色：赤。
23      }
 24      
25      .green {
 26          背景色：緑。
27      }
 28      
29      .blue {
 30          背景色：青。
31      }
 32