vuecssuiant-designantdreactantantd-vueenterprisefrontendui-designvue-antdvue-antd-uivue3vuecomponent
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.2 KiB
77 lines
2.2 KiB
<docs> |
|
--- |
|
order: 4 |
|
title: |
|
zh-CN: 排版 |
|
en-US: Typesetting |
|
--- |
|
|
|
## zh-CN |
|
|
|
布局基础。 |
|
|
|
子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。 |
|
|
|
## en-US |
|
|
|
Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode. |
|
|
|
</docs> |
|
|
|
<template> |
|
<div id="components-grid-demo-flex"> |
|
<a-divider orientation="left">sub-element align left</a-divider> |
|
<a-row 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> |
|
|
|
<a-divider orientation="left">sub-element align center</a-divider> |
|
<a-row 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> |
|
|
|
<a-divider orientation="left">sub-element align right</a-divider> |
|
<a-row 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> |
|
|
|
<a-divider orientation="left">sub-element monospaced arrangement</a-divider> |
|
<a-row 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> |
|
|
|
<a-divider orientation="left">sub-element align full</a-divider> |
|
<a-row 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> |
|
|
|
<a-divider orientation="left">sub-element align full</a-divider> |
|
<a-row justify="space-evenly"> |
|
<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> |
|
|
|
<style lang="less" scoped> |
|
:deep(#components-grid-demo-flex) [class~='ant-row'] { |
|
background: rgba(128, 128, 128, 0.08); |
|
} |
|
</style>
|
|
|