如何嵌套Ant Design网格？

Question

我已经创建了两列（6-span），我想在这两列下添加一个组件，该怎么做？
我曾经是一名android开发人员。我知道线性布局可以在android中快速实现这一需求。
框架开发人员告诉我使用Flex布局来实现此要求。但是，在阅读了相关文档之后，我仍然不知道如何实现。

Answer 1

您可以使用CSS或antd Grid components-Row和Col来设计布局，它们可以为您处理CSS。

const FlexBox = styled.div`
  margin: 20px;
  padding: 20px;
  border: 1px solid palevioletred;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

const borderStyle = { border: '1px solid palevioletred' };
const rowStyle = { ...borderStyle, width: '100%', padding: 10 };

export default function App() {
  return (
    <FlexBox>
      <Row type="flex" justify="space-between" style={rowStyle}>
        <Col style={borderStyle}>
          <Row type="flex" justify="space-between" style={rowStyle}>
            <Col style={borderStyle}>Col-3</Col>
            <Col style={borderStyle}>Col-3</Col>
          </Row>
          <Row type="flex" justify="center">
            <Col>Target</Col>
          </Row>
        </Col>
        <Col style={borderStyle}>Col-2</Col>
      </Row>
    </FlexBox>
  );
}