The row layout in vue is aligned to the right

vue row layout aligned to the right

<el-row type="flex" justify="end">

• start first (default)
• center center
• end
• space-between Distribution adaptation (two sides – middle, no gaps on both sides)
• around (middle – both sides, there will be gaps on both sides)

vue streaming layout

Fluid Layout in Vue refers to a responsive page layout method used to realize the display method that is suitable for desktop and mobile devices.

Flow layout is mainly achieved through basic layout technologies such as percentages in CSS, flexbox and Grid.

In Vue development, you can use a raster system (Grid System) provided by component libraries such as Element-UI or Vuetify for streaming layout.

These raster systems provide a 12-column layout grid system that supports adaptive element size, left-to-right and right-to-left arrangement, multimedia query and breakpoint management.

Here is an example

<template>
  <div class="container">
    <el-row>
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        ... <!-- Contents of the first column -->
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        ... <!-- Contents of the second column -->
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        ... <!-- Contents of the third column -->
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        ... <!-- Contents of the fourth column -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  ...
}
</script>

<style>
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
</style>

In this example, we used the El-Row and El-Col components of Element-UI to create a responsive layout.

Each column contains precise xs, sm and other attributes to control size and breakpoints.

In addition, we set up a container element with a maximum width of 1200px and centered in the page.

This enables an adaptive grid layout and meets the display needs of various screen sizes.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.