Layout layout (element ui)

Layout layout

blah blah

In fact, the use of layout layout has related descriptions on the official website , and there are also related examples, so it is easy to get started quickly. However, some problems were found during the actual use, so I did some study and research, and I would like to share with you here.

gutter

In order to see the effect more clearly, a background color is added to each column.

example

Let’s start with one without the gutter effect

<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>

Effect picture:
insert image description here
another one with gutter

<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>

The renderings are as follows:
insert image description here

Discover

Do you seem to have found something?
That's right, the last column (el-col) is one section short.

From the effect diagram, gutter is realized by adding a piece in front of each column 分栏间隔. A piece is added in front of the first column, but it is outside the div and does not affect the inside, but the last column is squeezed out of the div, which is equivalent to being covered beyond the boundary.

el-row row content is centered

Top left corner by default

In order to see the effect intuitively, set the row height to 200px, plus a black border.

<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>

The effect is as follows:
insert image description here

center horizontally

type="flex"Just add the sum to the 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>

The renderings are as follows:
insert image description here

vertical center

type="flex"Just add the sum to the 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>

insert image description here

Centered horizontally and vertically

type="flex"Just add , justify="center"and on el-row 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>

insert image description here
This sharing is over, if there is anything wrong, welcome to correct me! You are also welcome to add.