ant-design-vue/flex-align.md at 4cd44aea3d3c2f45da8a14329573dbcd5df61272

mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-16 01:41:15 +08:00

tangjinzhou 4cd44aea3d style: format code

2019-09-28 20:45:07 +08:00

1.2 KiB

Raw Blame History

#### Flex 对齐 Flex 子元素垂直对齐。 #### Flex Alignment Flex child elements vertically aligned.

<template>
  <div>
    <p>Align Top</p>
    <a-row type="flex" justify="center" align="top">
      <a-col :span="4"><p class="height-100">col-4</p></a-col>
      <a-col :span="4"><p class="height-50">col-4</p></a-col>
      <a-col :span="4"><p class="height-120">col-4</p></a-col>
      <a-col :span="4"><p class="height-80">col-4</p></a-col>
    </a-row>

    <p>Align Center</p>
    <a-row type="flex" justify="space-around" align="middle">
      <a-col :span="4"><p class="height-100">col-4</p></a-col>
      <a-col :span="4"><p class="height-50">col-4</p></a-col>
      <a-col :span="4"><p class="height-120">col-4</p></a-col>
      <a-col :span="4"><p class="height-80">col-4</p></a-col>
    </a-row>

    <p>Align Bottom</p>
    <a-row type="flex" justify="space-between" align="bottom">
      <a-col :span="4"><p class="height-100">col-4</p></a-col>
      <a-col :span="4"><p class="height-50">col-4</p></a-col>
      <a-col :span="4"><p class="height-120">col-4</p></a-col>
      <a-col :span="4"><p class="height-80">col-4</p></a-col>
    </a-row>
  </div>
</template>

1.2 KiB Raw Blame History

1.2 KiB

Raw Blame History