---
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.
```jsx
import { Row, Col, Divider } from 'antd';
ReactDOM.render(
< >
< Divider orientation = "left" style = {{ color: ' # 333 ' , fontWeight: ' normal ' } } >
sub-element align left
< / Divider >
< Row justify = "start" >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< / Row >
< Divider orientation = "left" style = {{ color: ' # 333 ' , fontWeight: ' normal ' } } >
sub-element align center
< / Divider >
< Row justify = "center" >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< / Row >
< Divider orientation = "left" style = {{ color: ' # 333 ' , fontWeight: ' normal ' } } >
sub-element align right
< / Divider >
< Row justify = "end" >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< / Row >
< Divider orientation = "left" style = {{ color: ' # 333 ' , fontWeight: ' normal ' } } >
sub-element monospaced arrangement
< / Divider >
< Row justify = "space-between" >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< / Row >
< Divider orientation = "left" style = {{ color: ' # 333 ' , fontWeight: ' normal ' } } >
sub-element align full
< / Divider >
< Row justify = "space-around" >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< Col span = {4} > col-4< / Col >
< / Row >
< />,
mountNode,
);
```
```css
#components-grid-demo-flex [class~='ant-row'] {
background: rgba(128, 128, 128, 0.08);
}
```
