1. はじめに
el-col: 列。これは、Element UI レイアウトのコア コンポーネントです。その機能は、さまざまなデバイスのさまざまな画面サイズに適応しやすくするために、行を 24 のグリッドに分割することです。行内のグリッドの数は、span 属性を指定することで決定できます。
el-row: 行。エルコルの外層に包まれており、その中には無数のエルコルが存在します。
<el-row style="border:1px solid #333;width:300px;height:102px">
<el-col :span="24">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>
通常の形式では、:span のデフォルトは 24 です。:span が 12 の場合、元の列数の半分になります。
<el-row style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>
次に、el-row の属性:
:gutter は、レイアウト間の幅、つまり列の間隔を調整します。(つまり、2 つのカラム間の分離距離)
元のコード:
<el-row style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12">
<div style="background:red;height:100px"></div>
</el-col>
<el-col :span="12">
<div style="background:yellow;height:100px"></div>
</el-col>
</el-row>
2 つの div の間にギャップがある場合は、その違いを表示します。:gutter 属性を使用するだけです。
<el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12">
<div style="background:red;height:100px"></div>
</el-col>
<el-col :span="12">
<div style="background:yellow;height:100px"></div>
</el-col>
</el-row>
ただし、Web ページのコードでは、コードは次のように表示されます。
つまり、:gutter 属性は実際に div のパディング属性を設定します。
3、el-col 属性
(1): オフセットはブロックの位置を調整します (毎回 1 グリッド/24 グリッド)
<el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
<el-col :offset="6" :span="12">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>
(2) :push はグリッドの数を右に移動します。値は 1 ～ 24 の整数です。
<el-row style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12" :push="2">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>
(3): プルするとグリッドの数が左に移動します。値は 1 ～ 24 の整数です。
<el-row style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12" :pull="2">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>
(4) 要素UIレスポンシブレイアウト
xs: <768px レスポンシブなグリッド番号または属性オブジェクト、携帯電話などの非常に小さな画面。例: { スパン: 4、オフセット: 8 }
sm: ≥768px レスポンシブなグリッド番号または属性オブジェクト、タブレットなどの小さな画面。例: { スパン: 4、オフセット: 8 }
md: ≥992px 応答性の高いグリッド番号または属性オブジェクト、デスクトップ モニターなどの中程度の画面。例: { スパン: 4、オフセット: 8 }
lg: ≥1200px 応答性の高いグリッド番号または属性オブジェクト、大型デスクトップ モニターなどの大画面。例: { スパン: 4、オフセット: 8 }
xl: ≥1920px レスポンシブなグリッド番号または属性オブジェクト、2k 画面などの超大画面表示など。例: { スパン: 4、オフセット: 8 }
<el-col :span="20" :xl="{span:16}"></el-col>3. 位置合わせ
type="flex" を設定すると、フレックス レイアウトが開始され、justify 属性によって組版方法が調整されます。
属性値を揃える: 開始位置を中央揃え、終了位置を左揃え、終了位置を右揃え、スペース - スペース間のスペースを中央に揃える - 周囲の左右のスペースはハーフ スペース スペースの位置合わせを考慮
<el-row type="flex" justify="center" style="border:1px solid #333;width:300px;height:102px">
<el-col :span="12">
<div style="background:red;height:100px"></div>
</el-col>
</el-row>