vueのelement-ui Layoutレイアウト

vueのelement Layoutレイアウト

 1.//<el-row>el-row>   ，       ，           ，           ，
 2. <el-row :gutter="20" type="flex" justify="center" align="top">
 3.	 	//<el-col>el-col>    ，      
 4. 	<el-col :span="24" :offset="6" :xs="8" :sm="6" :md="4" :lg="3" :xl="1">el-col>
 5. el-row>

注記rowラベル
パラメータ
説明
を選択します.
オプション値
デフォルト
gutter
グリッド間隔(Grid Spacing)
number
数値でいい
0
type
レイアウトモード、
オプションflex、現代ブラウザで有効
string
なし
justify
flexレイアウトでの水平配列方式
string
start/end/center/space-around/space-between
start
align
flexレイアウトでの垂直配列
string
top/middle/bottom
top
tag
カスタム要素ラベル
string
*
div
注記colラベル
パラメータ
説明
を選択します.
オプション値
デフォルト
span
グリッドが占める列の数
number
なし
24
offset
グリッドの左側の間隔グリッド
number
なし
0
push
グリッドを右に移動
number
なし
0
pull
グリッドを左に移動
number
なし
0
xs
<768 px応答グリッド数またはグリッドプロパティオブジェクト
number/object
(例:{span:4,offset:4})
なし
sm
≥768 px応答グリッド数またはグリッドプロパティオブジェクト
number/object
(例:{span:4,offset:4})
なし
md
≥992 px応答グリッド数またはグリッド属性オブジェクト
number/object
(例:{span:4,offset:4})
なし
lg
≥1200 px応答グリッド数またはグリッド属性オブジェクト
number/object
(例:{span:4,offset:4})
なし
xl
≧1920 px応答グリッド数またはグリッドプロパティオブジェクト
number/object
(例:{span:4,offset:4})
なし
tag
カスタム要素ラベル
string
*
div
参照element-ui,element-uiアドレス