ant-design-vue

2.0 KiB

Raw Blame History

#### Flex 布局 Flex 布局基础。使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。 #### Flex Layout Use `row-flex` define `flex` layout, its child elements depending on the value of the `start`,` center`, `end`,` space-between`, `space-around`, which are defined in its parent node layout mode.

<template>
  <div>
    <p>sub-element align left</p>
    <a-row type="flex" justify="start">
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
    </a-row>

    <p>sub-element align center</p>
    <a-row type="flex" justify="center">
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
    </a-row>

    <p>sub-element align right</p>
    <a-row type="flex" justify="end">
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
    </a-row>

    <p>sub-element monospaced arrangement</p>
    <a-row type="flex" justify="space-between">
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
    </a-row>

    <p>sub-element align full</p>
    <a-row type="flex" justify="space-around">
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
      <a-col :span="4">
        col-4
      </a-col>
    </a-row>
  </div>
</template>

2.0 KiB Raw Blame History

2.0 KiB

Raw Blame History