如何嵌套 Ant Design 网格？

Question

我已经创建了两列（6-span），我想在这两列下添加一个组件，我该怎么做？
我曾经是一名安卓开发者。我知道线性布局在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>
  );
}