レイアウトレイアウト (要素 ui)

レイアウトレイアウト

何とか何とか

実は、レイアウトの使い方については、 element の公式サイトに関連した記述があり、関連する例も掲載されているので、すぐに始めやすいです。しかし、実際に使ってみるといくつか問題点も見つかったので、少し調べて調べてみたのでここで共有したいと思います。

側溝

効果をより明確に確認するために、各列に背景色が追加されています。

例

ガターエフェクトなしのものが最初に来ます

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row>
        <el-col :span="6" style="background: blue;">
          <el-button>重置</el-button>
        </el-col>
        <el-col :span="6" style="background: red;">
          <el-button>查询</el-button>
        </el-col>
        <el-col :span="6" style="background: blue;">
          <el-button>重置</el-button>
        </el-col>
        <el-col :span="6" style="background: red;">
          <el-button>查询</el-button>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

レンダリング:
ここに画像の説明を挿入
ガター付きの別のレンダリング

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row gutter="20">
        <el-col :span="6" style="background: blue;">
          <el-button>重置</el-button>
        </el-col>
        <el-col :span="6" style="background: red;">
          <el-button>查询</el-button>
        </el-col>
        <el-col :span="6" style="background: blue;">
          <el-button>重置</el-button>
        </el-col>
        <el-col :span="6" style="background: red;">
          <el-button>查询</el-button>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

レンダリングは次のとおりです。
ここに画像の説明を挿入

発見

何かを見つけたようですか？
そうです、最後の列 (el-col) は 1 セクション短いです。

エフェクト図から、溝は各列の前にピースを追加することで実現されます分栏间隔。最初の列の前にピースが追加されますが、それは div の外側にあり、内側には影響しませんが、最後の列は div の外に押し出されており、これは境界を越えてカバーされているのと同じです。

el-row 行の内容が中央に配置されます

デフォルトでは左上隅

効果を直感的に確認するには、線の高さを 200 ピクセルに設定し、さらに黒い境界線を付けます。

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row style="height: 200px; border: black 1px solid">
        <span>hello</span>
      </el-row>
    </el-row>
  </div>
</template>

効果は次のとおりです。
ここに画像の説明を挿入

水平方向に中央揃え

type="flex"合計をel-row に追加するだけですjustify="center"。

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row type="flex" justify="center" style="height: 200px; border: black 1px solid">
        <span>hello</span>
      </el-row>
    </el-row>
  </div>
</template>

レンダリングは次のとおりです。
ここに画像の説明を挿入

垂直中央

type="flex"合計をel-row に追加するだけですalign="middle"。

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row type="flex" align="middle" style="height: 200px; border: black 1px solid">
        <span>hello</span>
      </el-row>
    </el-row>
  </div>
</template>

ここに画像の説明を挿入

水平方向と垂直方向の中央揃え

el-row にtype="flex"とjustify="center"を追加するだけですalign="middle"。

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row type="flex" justify="center" align="middle" style="height: 200px; border: black 1px solid">
        <span>hello</span>
      </el-row>
    </el-row>
  </div>
</template>

ここに画像の説明を挿入
この共有は終了しました。何か間違っている場合は、修正してください。追加も大歓迎です。