Flex 弹性布局

设置元素之间的间距

代码演示

horizontalvertical

<template>
  <a-flex gap="middle" vertical>
    <a-radio-group v-model:value="value">
      <a-radio value="horizontal">horizontal</a-radio>
      <a-radio value="vertical">vertical</a-radio>
    </a-radio-group>
    <a-flex :vertical="value === 'vertical'">
      <div
        v-for="(item, index) in new Array(4)"
        :key="item"
        :style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"
      />
    </a-flex>
  </a-flex>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('horizontal');
const baseStyle {
  width: '25%',
  height: '54px',
};
</script>

对齐方式

设置对齐方式。

Select justify :

flex-start

center

flex-end

space-between

space-around

space-evenly

Select align :

flex-start

center

flex-end

<template>
  <a-flex gap="middle" align="start" vertical>
    <p>Select justify :</p>
    <a-segmented v-model:value="justify" :options="justifyOptions" />
    <p>Select align :</p>
    <a-segmented v-model:value="alignItems" :options="alignOptions" />
    <a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems">
      <a-button type="primary">Primary</a-button>
      <a-button type="primary">Primary</a-button>
      <a-button type="primary">Primary</a-button>
      <a-button type="primary">Primary</a-button>
    </a-flex>
  </a-flex>
</template>
<script setup>
import { reactive, ref } from 'vue';
const justifyOptions = reactive([
  'flex-start',
  'center',
  'flex-end',
  'space-between',
  'space-around',
  'space-evenly',
]);
const alignOptions = reactive(['flex-start', 'center', 'flex-end']);
const justify = ref(justifyOptions[0]);
const alignItems = ref(alignOptions[0]);
const boxStyle = {
  width: '100%',
  height: '120px',
  borderRadius: '6px',
  border: '1px solid #40a9ff',
};
</script>

设置间隙

使用 gap 设置元素之间的间距，预设了 small、middle、large 三种尺寸，也可以自定义间距。

smallmiddlelargecustomize

<template>
  <a-flex gap="middle" vertical>
    <a-radio-group v-model:value="gapSize">
      <a-radio value="small">small</a-radio>
      <a-radio value="middle">middle</a-radio>
      <a-radio value="large">large</a-radio>
      <a-radio value="customize">customize</a-radio>
    </a-radio-group>
    <template v-if="gapSize === 'customize'">
      <a-slider v-model:value="customGapSize" />
    </template>
    <a-flex :gap="gapSize !== 'customize' ? gapSize : customGapSize">
      <a-button type="primary">Primary</a-button>
      <a-button>Default</a-button>
      <a-button type="dashed">Dashed</a-button>
      <a-button type="link">Link</a-button>
    </a-flex>
  </a-flex>
</template>
<script setup>
import { ref } from 'vue';
const gapSize = ref('small');
const customGapSize = ref(0);
</script>

API

属性	说明	类型	默认值
vertical	flex 主轴的方向是否垂直，使用 flex-direction: column	boolean	false
wrap	设置元素单行显示还是多行显示	参考 flex-wrap	nowrap
justify	设置元素在主轴方向上的对齐方式	参考 justify-content	normal
align	设置元素在交叉轴方向上的对齐方式	参考 align-items	normal
flex	flex CSS 简写属性	参考 flex	normal
gap	设置网格之间的间隙	small | middle | large | string | number	-
component	自定义元素类型	Component	div