Flex 弹性布局 ​

vue

<template>
  <el-radio-group v-model="value">
    <el-radio value="horizontal" size="large">horizontal</el-radio>
    <el-radio value="vertical" size="large">vertical</el-radio>
  </el-radio-group>

  <el-flex :vertical="value === 'vertical'">
    <div class="flex-content ep-bg-purple" />
    <div class="flex-content ep-bg-purple-light" />
    <div class="flex-content ep-bg-purple" />
    <div class="flex-content ep-bg-purple-light" />
  </el-flex>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('horizontal')
</script>

<style scoped lang="scss">
.flex-content {
  width: 25%;
  min-height: 36px;
  border-radius: 4px;
  margin-bottom: 12px;
}
</style>

vue

<template>
  <el-radio-group v-model="justify">
    <el-radio-button
      v-for="item in justifyOptions"
      :key="item"
      :label="item"
      :value="item"
    />
  </el-radio-group>

  <div style="margin-top: 12px">
    <el-radio-group v-model="align">
      <el-radio-button
        v-for="item in alignOptions"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-radio-group>
  </div>

  <el-flex :justify="justify" class="flex-content" :align="align">
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="primary" plain>Primary</el-button>
  </el-flex>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FlexProps } from 'element-plus-x'

const justifyOptions = reactive<FlexProps['justify'][]>([
  'flex-start',
  'center',
  'flex-end',
  'space-between',
  'space-around',
  'space-evenly',
])

const alignOptions = reactive<FlexProps['align'][]>([
  'flex-start',
  'center',
  'flex-end',
])

const justify = ref(justifyOptions[0])
const align = ref(alignOptions[0])
</script>

<style scoped lang="scss">
.flex-content {
  width: 100%;
  height: 120px;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  margin-top: 12px;
}
</style>

vue

<template>
  <el-radio-group v-model="gapSize">
    <el-radio-button
      v-for="item in options"
      :key="item"
      :label="item"
      :value="item"
    />
  </el-radio-group>

  <el-slider
    v-if="gapSize === 'customize'"
    v-model="customGapSize"
    style="margin-top: 12px"
  />

  <el-flex
    :gap="gapSize === 'customize' ? customGapSize : gapSize"
    class="flex-content"
  >
    <el-tag type="primary" plain>Primary</el-tag>
    <el-tag type="success" plain>Success</el-tag>
    <el-tag type="info" plain>Info</el-tag>
    <el-tag type="warning" plain>Warning</el-tag>
    <el-tag type="danger" plain>Danger</el-tag>
  </el-flex>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FlexProps } from 'element-plus-x'

const options = reactive(['small', 'default', 'large', 'customize'])

const gapSize = ref<string>('small')
const customGapSize = ref<number>(0)
</script>

<style scoped lang="scss">
.flex-content {
  width: 100%;
  border-radius: 6px;
  margin-top: 24px;
}
</style>

vue

<template>
  <el-radio-group v-model="value" style="margin-bottom: 12px">
    <el-radio-button
      v-for="item in options"
      :key="item"
      :label="item"
      :value="item"
    />
  </el-radio-group>

  <el-flex :wrap="value" gap="8">
    <el-tag v-for="(item, index) in new Array(24)" :key="item" type="primary">
      Tag {{ index + 1 }}
    </el-tag>
  </el-flex>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const options = reactive(['wrap', 'nowrap', 'wrap-reverse'])

const value = ref('wrap')
</script>

vue

<template>
  <el-card style="max-width: 210px" :body-style="{ padding: '12px 16px' }">
    <el-flex gap="12">
      <el-image
        fit="fill"
        style="width: 32px; height: 32px; border-radius: 6px"
        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      />
      <el-flex vertical gap="10">
        <el-text>image-file.png</el-text>
        <el-text type="info" style="align-self: flex-start">100KB</el-text>
      </el-flex>
    </el-flex>
  </el-card>
</template>